1.搭建环境（简单的下载安装Ruby）下载安装Ruby，Windows下的Ruby下载，Mac OS X 就跳过这一步，Linux自己去找吧（这部分用户的强项）
建议安装的时候勾选下，这样可以直接通过cmd命令行操作（不必手动添加Path）2.安装SASS完成第一步之后，在开始菜单中找到并运行Ruby命令行，如图
启动可以看到命令行窗口，安装SASS（LESS安装方法相同），在命令行键入如下代码（其实官网顶部所列的三条即为常用的）并回车：
gem install haml
如下图所示：
安装成功如下图所示：
3.创建SASS项目不使用其他任何库的SASS
首先进入到你本地项目目录下，我的放在e盘中，如下所示：
e:
这个时候就进入了项目目库中：
例如我们要创建一个项目，其名称叫作“mysass”：
mkdir mysass
此时mySass这个项目就在E:\mysass中了，要是你不放心，你可以使用ls命令查验一下：
ls
为了让项目规化的更完美一些，我把.scss的SASS文件都放在sass目录中，而需要转译出来的.css文件都将放在css目录中。因此，我们还需要在mySass项目中创建sass和css两个文件夹：
进入mysass文件夹中创建sass目录和css目录
4.普通SASS的转译接下来打开编辑器，新建一个文件，并且在里面编辑一段简单的SASS代码，如下所示：
$main-color: #ce4dd6;
$style: solid;
.navbar {
border-bottom: {
color: $main-color; style: $style;
}
}
a {
color: $main-color;
&:hover {
border-bottom: 1px $style;
}
}
并且将此文件命名为style.scss保存在mySass/sass下。
转译出来的CSS样式为：
.navbar {
border-bottom-color: #ce4dd6; border-bottom-style: solid;
}
a {
color: #ce4dd6;
}
a:hover {
border-bottom: 1px solid;
}
使用sass转译.scss文件，有一个不足之处，就是我们修改了.scss文件，不会自动转译。如果要时时刻刻看到修改sass转译后的css,只需要在sass命令的基础上添加一个参数--watch就可以。
为了验证这样的说法，我们先把刚才转译出来的style.css删除，然后通过sass
--watch命令重新转译一回：
$ sass --watch sass/style.scss
这样一来，你可以看到提示：
>>> Sass is watching for changes. Press Ctrl-C to stop. overwrite sass/style.css
sass/style.scss转译到sass/style.css下，并没有转到css目录中，这是他不足的一处。转译出来的在不在css目录下，我想你并不会太在意（大不了到时copy一下），而关心的是，他是不是如前面所说的，可以时间监控转译.scss文件。
摘自:http://ued.ctrip.com/blog/?p=3417
http://uecss.com/sass-less-how-to-install-and-use.html
参考：http://www.w3cplus.com/preprocessor/organize-that-sass.html
原文：http://www.cnblogs.com/2boy/p/3532807.html