一、首先在有ruby选项的命令行创建一个compass工程：
（1）创建定制化的compass工程
输入compass create –sass-dir "sass" –css-dir "css" –javascripts-dir "js" –images-dir "img"，于是便生成了一个装样式表的文件夹（名称默认为stylesheets，但我将其命名为css），里面有若干默认文件（如ie.css、print.css和styles.css），一个装有Sass文件的文件夹（默认名称为sass，我保留了这个名字，里面装有ie.scss、print.scss和styles.scss文件），一个装有图像的文件夹（默认名称为images，但我将其重新命名为img），以及一个叫做.sass-cache的隐藏文件夹。默认情况下，Compass的create命令不会为JavaScript创建文件夹，所以需要手动创建。可以通过图形用户界面工具直接创建，也可以通过命令行来创建 ：md js （Windows下）；mkdir js （Mac OS X系统下）。
创建index.html文件： echo >index.html（Windows下）; touch index.html（Mac OS X系统下）。
（2）创建空的compass工程
输入compass create --bare --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "img" --bare参数避免Compass创建和添加一些初始化文件和文件夹，它仅仅创建一个config.rb文件和一个sass文件夹。
(3) 添加html代码（index.html）：
[html] view plain copy <!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>sass练习</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <header> <h4>sass学习</h4> </header> <nav> <ul> <li><a href="#">asdfsdgsrg</a></li> <li><a href="#">asdfsdgsrg</a></li> <li><a href="#">asdfsdgsrg</a></li> <li><a href="#">asdfsdgsrg</a></li> </ul> </nav> </body> </html>
（4）添加sass代码（styles.scss）：
[html] view plain copy $color: #888; $bgColor: #f36; header { color: $color; background-color: $bgColor; } nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } （5）命令行输入 compass watch 保存编译styles.scss，若无错误，css文件夹中将自动生成一个styles.css文件。此时修改并保存styles.scss文件，styles.css也会及时改变。
参考：《Sass和Compass设计师指南》
