1.变量
SASS允许使用变量，所有变量以$开头。
$btn-primary-color:#333;
.btn-primary{
color:$btn-primary-color;
}
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
默认变量：
$fontsize:14px !default;
如果需要覆盖默认变量，只需在默认变量前面重新声明普通变量即可
$fontsize:16px;
$fontsize:14px !default;
sass变量还存在全局变量与局部变量，在选择器、函数、混合宏...的外面定义的变量为全局变量
2.计算功能
SASS允许在代码中使用算式：
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
可使用的运算符包括：+ - * / %
3.嵌套
3.1选择器嵌套
如下面的代码：
ul li{
padding:11px 15px;
}
可以写成：
ul{
li{
padding:11px 15px;
}
}
3.2属性嵌套
如下面的代码：
span{
border-color:red;
border-radius:5px;
}
可以写成：
span{
border:{
color:red;
radius:5px;
}
}
注意：border后面必须加上冒号；
3.3伪类嵌套
伪类嵌套需使用&符号，例如：
.border-1px{
&:after{
position:absolute;
bottom:0;
left:0;
content:'';
width:100%;
height:1px;
background-color:#333;
}
}
4.sass注释
// 单行注释，只保留在sass源文件中，编译后被忽略
/*标准注释，会保留到编译后的文件*/
/*!
重要注释，即使压缩版也会保留，通常可以用于声明版权信息。
*/
5.sass继承
继承使用 @extend
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;
border-color: yellow;
}
编译为：
.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
6.Mixin混合器
使用Mixin来定义可重用代码块，例如：
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
7.插入文件
@import命令，用来插入外部文件。
@import sass/base.scss;
如果插入的是css文件，则等同于css中的import
@import css/common.css