标签：
sass是一款css的预处理器，有着强大的语法和函数，和less相比，更加友好的变量命名，获得了很多程序员的喜爱。而sass现在支持完整的css3，也是程序员钟爱sass的原因
sass的安装
sass的安装有三种途径，命令行工具，独立的ruby模块以及作为一种框架插件
第一种安装和使用就像这样：
gem install sass
如果你使用的是windows操作系统，那么你还必须首先安装ruby
为了运行sass，你可以这样操作
sass input.scss output.css
并且你还可以监听磁盘
sass --watch input.scss:output.css
非常方便。
安装和使用不再做过多赘述，下面看看用sass的一个小例子
#main p {
color: #00ff00;
width: 97%; }
#main p .redbox {
background-color: #ff0000;
color: #000000; }
上面的是sass，看看它是怎样编译的
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
是不是感觉很方便，很快捷呢？sass不再像以前使用css那样，而是有一个层级关系，这样更方便程序员思考该怎么样写结构。
#main {
width: 97%;
p, div {
font-size: 2em;
a { font-weight: bold; }
}
pre { font-size: 3em; }
}
更好的一个例子，我们看这个sass的结构，就知道p标签和div便签是作为id为main元素的后代，并且他们处于同级，一目了然，非常方便
编译后的结果：
#main {
width: 97%; }
#main p, #main div {
font-size: 2em; }
#main p a, #main div a {
font-weight: bold; }
#main pre {
font-size: 3em; }
更多的例子
变量申明
$width: 5em;
#main {
width: $width;
}
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}
编译后的结果：
#main {
width: 5em;
}
#sidebar {
width: 5em;
}
太酷炫了，有木有。
sass的总得语法和形式和less差不多，如果掌握了less，相信sass肯定会很快掌握的
标签：
原文地址：http://www.cnblogs.com/ricoder/p/4734558.html
