1.使用原因
使用CSS预处理语言的一个主要原因是想利用Sass获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象的CSS。Sass目前有两种语法，一种是SASS，这是旧版的SASS语法，主要特点是去除了编写CSS时候的{}，其文件的后缀名为".sass"。另一种是SCSS，是新版的sass，后缀名为".scss"。
2.变量
编写css的时候经常会遇到很多重复的属性值，可通过将这些重复的属性值赋给某个变量，在接下来的编写过程中，可将重复的属性值用这个变量代替。具体的实现代码如下。
/*设置变量*/
$linkColor : green;
$bgColor : yellow;
$width : 700px;
/*引用变量*/
.variate {
<span style="white-space:pre"> </span>background:$bgColor;
<span style="white-space:pre"> </span>width:$width;
}
.variate a {color:$linkColor;}
可使用 在线SASS编译，编译后的CSS代码为
@charset "UTF-8";
/*设置变量*/
/*引用变量*/
.variate {
background: yellow;
width: 700px;
}
.variate a {
color: green;
}
3. SASS嵌套
3.1 属性嵌套
SASS的嵌套是SASS是第二个使用非常广泛的规则。SASS的嵌套使得结构能够一目了然。分为属性嵌套和选择器嵌套。具体的实现方法如下：
/*设置变量*/
$linkColor : green;
$bgColor : yellow;
$width : 700px;
/*引用变量*/
.variate {
background:$bgColor;
width:$width;
}
.variate a {color:$linkColor;}
编译后的CSS代码为：
/*设置变量*/
$linkColor : green;
$bgColor : yellow;
$width : 700px;
/*引用变量*/
.variate {
background:$bgColor;
width:$width;
}
.variate a {color:$linkColor;}
3.2 选择器嵌套
SASS代码如下：
/*设置变量*/
$linkColor : green;
$bgColor : yellow;
$width : 700px;
/*引用变量*/
.variate {
background:$bgColor;
width:$width;
}
.variate a {color:$linkColor;}
编译后的CSS代码如下：
/*设置变量*/
$linkColor : green;
$bgColor : yellow;
$width : 700px;
/*引用变量*/
.variate {
background:$bgColor;
width:$width;
}
.variate a {color:$linkColor;}
不过这种嵌套不要过多，根据bootstrap的CSS编写规范，最好不要超过3层嵌套，不然会降低CSS引擎的处理效率。
4. SASS的模块化(Mixins)
在平时写CSS的时候，很多时候有一样的(属性，属性值)，可把这部分独立出现作为单独定义的模块，然后被选择器重复使用。例如以下的SASS代码
@mixin setBorder($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p {
@include setBorder(blue, 1px);
}
编译后的CSS代码为
p {
border-color: blue;
border-width: 1px;
border-style: dashed;
}
5. SASS的继承(extend)
可以理解为一个选择器继承另一个选择器上的所有样式。具体的实现方法如下：
.link {
font-size:18px;
}
.inherit {
@extend .link;
}
编译后的代码如下：
.link, .inherit {
font-size: 18px;
}
以上编译后的CSS代码多了一个类名，如果不需要这个多余的类名，可用"%"代替link的"."。