前言
由於.sass不兼容CSS代碼，所以以下內容完全使用.scss的語法。
Sass注釋
Sass中除了提供CSS中的標准注釋之外，還提供了一種靜默注釋：
/* 我是標准注釋 */
// 我是靜默注釋
標准注釋大多數情況下（一種例外：設置輸出風格為compressed）是會生成到最終的CSS中的，而靜默注釋的話，只是Sass的注釋，是不會被生成到CSS文件中的。
如果想，就算設置輸出風格為compressed也要加入特定注釋呢？那么可以采用重要注釋寫法，如下：
/*! 我的重要注釋 */
也就是在標准注釋的基礎上，將注釋的第一個字符設置為感嘆號。
Sass變量
Sass作為一個CSS預處理器，那么最基本的編程語言特性變量自然也是必不可少的。Sass中變量系統相對比較豐富，包含局部變量，全局變量，默認變量，特殊變量（變量作用在屬性上），多值變量。
Sass變量以$開頭，用:分割變量名與變量值，以;結尾。如： $color: red;
Sass變量，不區分中橫線和下划線，比如定義變量為$bg-color，那么使用$bg_color也能訪問到哦！
局部變量
同大多數編程語言一樣，變量的作用域是它本身的這個塊，以及所有的子集。如:
body{
$color: blue;
color: $color;
.container{
background-color: $color;
}
}
將被編譯為：
body {
color: blue;
}
body .container {
background-color: blue;
}
同時，需要注意：針對以上代碼，如果內部修改了$color的值，也會同時影響到外部的變量值。
全局變量
如果定義在局部的變量，與它同級的選擇器中是無法使用的：
body{
$color: blue;
color: $color;
.container{
background-color: $color;
}
}
// 會出現錯誤，未定義的變量
footer{
color: $color;
}
這個時候，就需要提升$color為全局變量，在變量值之后，加上!global,示例如下：
body{
$color: blue !global;
color: $color;
.container{
background-color: $color;
}
}
// 會出現錯誤，未定義的變量
footer{
color: $color;
}
這個的話，就能夠正常編譯了，因為$color被提升為全局變量了。
默認變量
在Sass中，可以通過在變量值之后加入!default來讓變量稱為默認變量，如果有對該變量的賦值，不管前后，那么變量的默認值都會被替換掉，示例如下：
$color: red;
body{
$color: blue !default;
color: $color;
.container{
background-color: $color;
}
}
footer{
color: $color;
}
可以通過注釋掉!default來查看生成的CSS的異同。
特殊變量
Sass的變量，還可以用在屬性中，此時需要使用#{變量名}來引用，示例如下：
$containerId: c1;
##{$containerId}{
color: red;
}
此時，生成的CSS為：
#c1 {
color: red;
}
多值變量
強大的Sass，還提供了一種特殊的變量，即為多值變量，在一個變量中，可以定義多個值，然后通過制定的函數訪問，示例如下：
// List類型的多值變量
$px: 5px 10px 15px 20px;
// Map類型的多值變量
$map: (id1: test, id2: testGrid, color: red);
body{
// 此處需要注意，索引是從1開始，不是從0哦。
margin-left: nth($px, 1);
// 使用map-get訪問，當心key的使用，指定了不存在的key會導致生成的css異常
#{map-get($map, id2)}{
color: red;
}
#id{
color: map-get($map, color);
}
}
生成的CSS如下：
body {
margin-left: 5px;
}
body testGrid {
color: red;
}
body #id {
color: red;
}
導入
體現可維護性的重要指標就是文件似乎可以單一職責，那么在Sass中，主要體現在導入上。由於Sass中的導入指令和CSS的導入指令是同樣的關鍵字，那么就需要按照一定的規則來判別了，滿足以下任意一條規則的導入，使用CSS的原生導入：
- 被導入的文件名以.css結尾
- 被導入的文件是一個在線的url地址
- 以@import url(...)方式去導入文件
同時，編寫局部的sass文件，建議使用下划線開頭,如： a.scss，這樣就不會生成多余的a.css了。
//_a.scss
#id2{
color: red;
}
//1.scss
@import "a.scss";
#id1{
color: blue;
}
body{
@import "a.scss";
}
最終生成的結果為:
#id2 {
color: red;
}
#id1 {
color: blue;
}
body #id2 {
color: red;
}
結尾
欲知后事如何，請聽下回分解！