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