sass+compass生成css的使用方法（总结）

如何使用compass生成css

sass使用的很广泛，网上的使用教程很多，看之后基本了解，但是弄不清楚怎么使用compass在css与sass之间互相转换。sass主要是用在css样式上，是代码量减少，层级关系更清晰。像是在c语言中的函数，定义一个函数之后，可以在main函数中直接调用，这样在以后需要修改的时候不需要一个个改，直接在定义的函数中修改一处即可。使用起来简单方便，容易上手。Sass本身只是一个编译器，Compass在它的基础上，封装了一系列有用的模块和模板，补充Sass的功能。它们之间的关系，有点像Javascript和jQuery、Ruby和Rails、python和Django的关系。

第一步：配置环境

1、因为sass依赖于ruby环境，所以装sass之前先确认装了ruby。先在官网下载个ruby，链接：http://railsinstaller.org/en

在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境



2、在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby

第二步：安装sass

直接在命令行输入：

gem install sass

升级sass版本的命令行为：

gem update sass

查看sass版本的命令行为：

sass -v

你也可以运行帮助命令行来查看你需要的命令：

sass -h

第三步：安装compass

gem install compass

会出现下面的信息



这代表你安装成功，当你运行这个命令，你看到不是这些信息，有可能在你的机器上没有Ruby或者不支持gem。

第四步：项目初始化

接下来，要创建一个你的Compass项目，假定它的名字叫做sass-test，那么在命令行键入：

compass create sass-test

当前目录中就会生成一个sass-test子目录。

进入该目录：

cd sass-test

你会看到，里面有一个config.rb文件，这是你的项目的配置文件。还有两个子目录sass和stylesheets，前者存放Sass源文件，后者存放编译后的css文件。



因为我们写出来的都是scss文件，要转换成css文件才可以运用在样式中。所以运行命令：

　　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文件。

第五步：如果要想把css装换成scss文件，就要运用在线编译工具了。