compass教程

compass安装:
为提高安装成功效率使用淘宝镜像安装:
1、依次执行下面三条命令,移除旧源,改用新源
gem sources --remove http://rubygems.org/ > gem sources --remove https://rubygems.org/ > gem sources -a http://ruby.taobao.org/
2、然后执行下面的命令,查看源列表
gem sources -l
应该会是下面输出
*** CURRENT SOURCES *** http://ruby.taobao.org
3、然后就可以安装compass了
gem install compass

一、Compass是什么?
简单说,Compass是Sass的工具库(toolkit)。
Sass本身只是一个编译器,Compass在它的基础上,封装了一系列有用的模块和模板,补充Sass的功能。它们之间的关系,有点像Javascript和jQuery、Ruby和Rails、python和Django的关系。
二、安装
Compass是用Ruby语言开发的,所以安装它之前,必须安装Ruby。
假定你的机器(Linux或OS X)已经安装好Ruby,那么在命令行模式下键入:
  sudo gem install compass
如果你用的是Windows系统,那么要省略前面的sudo。
正常情况下,Compass(连同Sass)就安装好了。
三、项目初始化
接下来,要创建一个你的Compass项目,假定它的名字叫做myproject,那么在命令行键入:
  compass create myproject
当前目录中就会生成一个myproject子目录。
进入该目录:
  cd myproject
你会看到,里面有一个config.rb文件,这是你的项目的配置文件。还有两个子目录sass和stylesheets,前者存放Sass源文件,后者存放编译后的css文件。

接下来,就可以动手写代码了。
四、编译
在写代码之前,我们还要知道如何编译。因为我们写出来的是后缀名为scss的文件,只有编译成css文件,才能用在网站上。
Compass的编译命令是
  compass compile
该命令在项目根目录下运行,会将sass子目录中的scss文件,编译成css文件,保存在stylesheets子目录中。
默认状态下,编译出来的css文件带有大量的注释。但是,生产环境需要压缩后的css文件,这时要使用--output-style参数。
  compass compile --output-style compressed
Compass只编译发生变动的文件,如果你要重新编译未变动的文件,需要使用--force参数。
  compass compile --force
除了使用命令行参数,还可以在配置文件config.rb中指定编译模式。
  output_style = :expanded
:expanded模式表示编译后保留原格式,其他值还包括:nested、:compact和:compressed。进入生产阶段后,就要改为:compressed模式。
  output_style = :compressed
也可以通过指定environment的值(:production或者:development),智能判断编译模式。
  environment = :development
  output_style = (environment == :production) ? :compressed : :expanded
在命令行模式下,除了一次性编译命令,compass还有自动编译命令
  compass watch
运行该命令后,只要scss文件发生变化,就会被自动编译成css文件。
更多的compass命令行用法,请参考官方文档。

猜你喜欢

转载自yuyongkun4519.iteye.com/blog/2353415
今日推荐