写在前面
关于CSS的缺点以及为什么会诞生CSS预处理器的原因，在上一篇介绍Less的博文中已经说过了，这里就不再赘述了，可以参考：如何使用Less？一篇博客就够了
Sass的简单介绍
不同于Less，Sass是基于Ruby开发的，发行于2007年，Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。
Sass的使用
要使用Sass相对less要稍微复杂一些，前期需要一个安装的过程。
安装Sass
因为Sass是基于Ruby的，所以需要提前安装好Ruby 安装Ruby 安装好了Ruby过后，在命令行输入
gem install sass
语法格式
Sass有2种语法格式：
①SCSS ——后缀名为.scss，类似于平时我们书写css的格式，需要些大括号和分号
②SASS ——后缀名为.sass，是最早的sass语法，不需要大括号和分号
本篇博客选择的是第一种，也就是SCSS语法
变量的使用
sass的变量以$开头，$后面是变量名，和CSS属性一样，：后跟的是变量的值，在值后面若是加上了!default，表示的是默认值。
普通变量
定义了之后可以在全局的范围中使用
/*SASS*/
$color: #ccc;
$width: 100px;
$height: 100px;
#test {
width: $width;
height: $height;
background-color: $color;
}
/*CSS*/
#test {
width: 100px;
height: 100px;
background-color: #ccc;
}
默认变量
默认变量只需要在变量值后面加上!default即可
/*SASS*/
$baseColor: red !default;
#test {
background-color:$baseColor;
}
/*CSS*/
#test {
background-color: red;
}
默认变量就是提供一个默认值，我们可以根据需求对值进行覆盖，覆盖的方法就是重新申明这个变量即可（目前个人感觉默认变量有点鸡肋）
/*SASS*/
$baseColor: green;
$baseColor: red !default;
#test {
background-color:$baseColor;
}
/*CSS*/
#test {
background-color: green;
}
特殊变量
一般我们常把变量存储属性的值，但是还是存在一些特殊的情况，比如我们变量是属性名，或者其他特殊的情况，我们要使用变量，必须以#{$variables}的形式使用
/*SASS*/
$backgroundParam: color !default;
#test {
background-#{$backgroundParam}: red;
}
/*CSS*/
#test {
background-color: red;
}
变量的运算
Sass支持多种运算：数字运算、颜色运算、字符串运算、布尔运算、数组运算等
/*SASS*/
$width: 12px;
#test {
width: $width + 3;
height: $width * 2;
}
/*CSS*/
#test {
width: 15px;
height: 24px;
}
嵌套
Sass的嵌套有两种，一种是选择器的嵌套，一种是属性嵌套，但是一般我们所说的嵌套都是指选择器嵌套，属性嵌套很少用到
选择器嵌套
选择器嵌套让我们的层次更加清晰
/*SASS*/
div {
h1 {
color: red;
}
}
/*CSS*/
div h1 {
color: red;
}
属性嵌套
属性嵌套用的很少，使用时必须加上冒号:，这里以background-color属性为例：
/*SASS*/
div {
background: {
color: red;
};
}
/*CSS*/
div {
background-color: red;
}
&的使用
在选择器嵌套的时候，我们可以使用&表示父级选择器，这里以a:hover为例：
/*SASS*/
div {
&:hover {
color: red;
}
}
/*CSS*/
div:hover {
color: red;
}
混合方法（Mixin）
和Less中的混合方法差不多，带或者不带参数都可以，都是类似于C语言中的宏，可以单独申明一个可复用的代码块，使用@minxin语法，定义一个代码块，使用@include语法，调用一个mixin
无参数mixin
/*SASS*/
@mixin baseStyle {
width: 100px;
height: 200px;
color: red;
}
div {
@include baseStyle;
}
/*CSS*/
div {
width: 100px;
height: 200px;
color: red;
}
带参数mixin
我们可以指定参数，也可以使用默认参数
/*SASS*/
@mixin baseStyle($width: 100px, $height: 200px, $color: red) {
width: $width;
height: $height;
color: $color;
}
div {
@include baseStyle(200px, 450px);
}
/*CSS*/
div {
width: 200px;
height: 450px;
color: red;
}
继承
在Sass中，我们一个选择器可以去继承另一个选择器，使用的是@extend 选择器的方式
/*SASS*/
.father {
width: 100px;
height: 200px;
color: red;
}
.son {
@extend .father;
}
/*CSS*/
.father, .son {
width: 100px;
height: 200px;
color: red;
}
高级用法
这也是Sass区别于Less的一个非常重要的特点，就是支持条件判断、循环等高级用法
条件判断
可以使用@if来进行条件判断
/*SASS*/
div {
@if(4 > 1) {
width: 200px;
}
@if(1 > 4) {
width: 100px;
}
}
/*CSS*/
div {
width: 200px;
}
除了@if，还有@else可以来配套使用
/*SASS*/
div {
@if(0 > 1) {
width: 200px;
}@else {
width: 100px;
}
}
/*CSS*/
div {
width: 100px;
}
循环语句
Sass支持for循环，使用@for
/*SASS*/
@for $i from 1 to 3 {
.div#{$i} {
color: red;
}
}
/*CSS*/
.div1 {
color: red;
}
.div2 {
color: red;
}
还支持while循环
/*SASS*/
$i: 5;
@while $i > 0 {
div#{$i} {
color: red;
}
$i: $i - 2;
}
/*CSS*/
div5 {
color: red;
}
div3 {
color: red;
}
div1 {
color: red;
}
还支持each循环
/*SASS*/
@each $i in 1,2 {
div#{$i} {
color: red;
}
}
/*CSS*/
div1 {
color: red;
}
div2 {
color: red;
}
自定义函数
Sass还可以让用户自定义函数，使用@function
/*SASS*/
@function SetWidth($num) {
@return 50px * $num;
}
div {
width: SetWidth(2);
}
/*CSS*/
div {
width: 100px;
}
总结
Sass其实总体上和Less差不多，不过Sass相对于Less要更强大一些，不过日常的使用的话感觉Sass和Less都可以使用，没问题。更多的详细的Sass可以参考官方文档Sass中文文档