16年的项目使用过sass,搁置了几年，竟然语法忘了大半。吃了面试的亏，这里再温习一遍。
SASS目前为止有两种语法。最新的语法称为“SCSS”,增强了对CSS3的支持。这意味着每个CSS3的语法也适用于SCSS。SCSS文件的扩展名为.scss。
另一种语法称为SASS的老语法，也称为缩进语法。他不使用大括号和分号，而是使用缩进来指定块。文件使用扩展名为.sass。
现在通常称做SASS的，其实是SCSS。接下来介绍SCSS这种语法。
SASS特征
1.变量
可以声明变量，并在整个样式表中使用。可以在任意地方引用变量。
1
$变量名：变量值；
例子：
1
2
3
4
5
6
7
8
9
/* 声明变量*/
$color:#333;
$bgcolor:#f36;
/* 引用变量 */
body{
color:$color;
background-color:$bgcolor;
}
sass中变量的特性适用于定义主题（换肤），我们可以将背景颜色、字体颜色、边框属性等常规样式统一定义，这样不同的主题只需要定义不同的变量文件就可以。
2.嵌套
SASS中嵌套有两种，一种是选择器的嵌套，一种是样式的嵌套。嵌套的目的是减少代码量、增强代码的可读性。
例子：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 选择器嵌套*/
section { margin: 10px;
nav { height: 25px;
a { color: #0982c1;
&:hover{
text-decoration: underline;
}
}
}
}
/*样式嵌套*/
li{
font:{
style:italic;
family:serif;
weight:bold;
size:1.2em；
}
}
3.Mixins
Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。某段CSS样式经常要用到多个元素中，这样就需要重复的写多次。在SASS中，可以为这些公用的CSS样式定义一个Mixin，然后在CSS需要使用这些样式的地方直接调用定义好的Mixin。这是一个非常有用的特性，Mixins被作一个公认的选择器，还可以在Mixins中定义变量或者默认参数。
SASS中声明Mixins需要使用@mixin,在后面紧跟Mixins的名，同时在Mixins中，还可以定义参数，同时可以给这个参数设置一个默认值，参数名需要使用$符号开始。
1
2
3
@mixin Mixins名（$参数名：参数值){
/* 样式规则 */
}
例子：
1
2
3
4
@mixin error($borderWidth:2px){
border:$borderWidth solid #f00;
color:#f00;
}
上述定义好的Mixins，需要使用@include 关键词，然后在其后紧跟需要调用的Mixins。
1
2
3
选择器{
@include(Mixins名)
}
例子：
1
2
3
4
5
6
.generic-error{
@include error(); /*直接调用error mixins*/
}
.login-error{
@include error(3px) /* 调用error mixins ,并将$borderWidth 参数重定义为3px */
}
4.选择器继承
在CSS中的属性继承应该很熟悉。平时在写CSS样式也常碰到多个元素应用相同的样式，我们在CSS中常把具有相同样式的选择器并列写在一起，但往往需给单独的元素添加另外的样式，这个时候我们就需要把其中选择器单独出来写样式，如此一来我们维护样式就相当的麻烦。
SASS的继承是把一个选择器的所有样式继承到另一个选择器上，在继承另一个选择器的样式时需要使用@extend开始，后面跟着被继承的选择器。
例子：
1
2
3
4
5
6
7
8
.block{
margin:10px 5px;
padding:2px;
}
p{
@extend .block; /*继承.block选择器下所有样式*/
border:1px solid #eee;
}
但这种做法有时候会生成一些没必要的代码，比如说，仅有部分样式相同，但并不想独自创建一个类名，以免增生无用之代码，这个时候可以将类.换成%，在上例的基础上做以调整：
1
2
3
4
5
6
7
8
9
10
%block { margin: 10px 5px; padding: 2px; }
p {
@extend %block;
border: 1px solid #eee;
}
ul,ol {
@extend %block;
color: #333;
text-transfomr:uppercase;
}
上面这个编译出来如下：
1
2
3
p, ul, ol { margin: 10px 5px; padding: 2px; }
p { border: 1px solid #eee; }
ul, ol { color: #333; text-transfomr: uppercase; }
总结
SASS中的四个基本特性：变量、嵌套、Mixins和@include、继承@extend。