摘要：這個(gè)時(shí)候小明如果僅僅引入不想改，那么就是這個(gè)值，如果他想改，就可以在任何一處重新聲明這個(gè)變量，那么就會(huì)變成小明的值。

這一篇主要詳述保持sass條理性和可讀性的3個(gè)最基本方法——嵌套、導(dǎo)入和注釋。

變量本身的作用是為了保持屬性值的可維護(hù)性，把所有需要維護(hù)的屬性值放在同一個(gè)地方，快速更改，處處生效，可謂售后無憂。

變量用"$"符號(hào)開頭進(jìn)行聲明，任何可以用作CSS屬性值的東西都可以用作sass變量的值，單個(gè)值、空格分開的多個(gè)值、逗號(hào)分開的多個(gè)值都可以：

$primary-color: #233;
$general-border: 1px solid #ffffd;

變量一般聲明在sass源代碼的開頭處，CSS規(guī)則塊外（花括號(hào)外面），便于尋找和維護(hù)，不過有時(shí)候你也想將變量聲明在規(guī)則塊內(nèi)，這也是沒有問題的，只是這樣就只能在塊內(nèi)使用，類似“塊作用域”。

凡是CSS屬性的標(biāo)準(zhǔn)值可存在的地方，變量都可以使用，而且變量可以被引用在另一個(gè)變量的聲明中：

$primary-color: #233;
$general-border: 1px solid $primary-color;

可能還見到過形如#{$val}這樣去用變量的，用#{和}包裹，這其實(shí)是把變量看成一個(gè)表達(dá)式在用，這樣的用法叫插值，這個(gè)在sass高級(jí)特性中再述。

嵌套規(guī)則就像洋蔥，一層一層，很有層次感，即可讀性和條理性。最常見的選擇器嵌套，就是一層層打開，一般被包含選擇器作為包含選擇器的后代選擇器展開：

/*sass*/
li{
    float:left;
    a{
        color: #c33;
    }
}
/*生成的css*/
li{
    float:left;
}
li a{
    color:#c33;
}

父選擇器標(biāo)識(shí)符&可以放在任何一個(gè)選擇器可以出現(xiàn)的地方，代表的就是字面意思——父選擇器，為什么要有這個(gè)東西呢？因?yàn)椴幌霟o腦化被當(dāng)做后代展開，最常見的比如當(dāng)嵌套偽類選擇器時(shí)：

li{
    float:left;
    a{
        color: #233;
        &:hover{
            color:#c33;
        }
    }
}
/*這樣生成的CSS是這樣的*/
li{
    float:left;
}
li a{
    color:#233;
}
/*注意這里的a選擇器和偽類選擇器間沒有空格，&被父選擇器直接替換*/
li a:hover{
    color:#c33
}

當(dāng)包含父選擇器標(biāo)識(shí)符的嵌套規(guī)則打開時(shí)，不會(huì)簡(jiǎn)單當(dāng)做后代選擇器拼接，而是&被父選擇器直接替換。

偽類是一種常用用法，當(dāng)然這個(gè)“飆師傅”——&——也可以放在選擇器后面（記得遇到&打開時(shí)不是被正常拼接，可以替換）：

#content aside{
    color:red;
    body.ie & { color:green }
}
/*輸出的css是這樣的*/
#content aside{
    color:red;
}
body.ie #content aside { color:green }

群組選擇器，如h1,h2,h3{ a{...} }或者div{ h1,h2,h3{...} }，sass會(huì)正確處理，分別打開組合h1 a, h2 a, h3 a{...}，div h1, div h2, div h3{...}

子組合選擇器和同層選擇器：>、+和~ ，sass都會(huì)正確處理，不管它們是在選擇器前還是后

寫背景樣式時(shí)寫一堆background-XX很煩吧，屬性嵌套可以幫你減少一些工作量。把屬性名從中劃線的地方斷開，在根屬性后邊添加一個(gè)冒號(hào)，緊跟一個(gè)花括號(hào)塊，把子屬性寫在花括號(hào)中：

div{
    background:{
        image: url(./img/233.png);
        repeat: no-repeat;
        size: contain;
    }
}

Sass的@import和CSS的不一樣。CSS的@import，只有在執(zhí)行到的時(shí)候才去下載其他CSS文件，這就影響了頁面加載；而Sass的@import在生成CSS文件的時(shí)候就把相關(guān)文件導(dǎo)入進(jìn)來了。

Sass的@import并不需要指明被導(dǎo)入文件的全名，即可以省略.sass或者.scss擴(kuò)展名。

此外，每個(gè)sass文件一般會(huì)被輸出成CSS文件，但其實(shí)當(dāng)我們用@import引入sass文件時(shí)，我們僅僅希望生成一個(gè)總體的css文件，不需要每個(gè)sass文件都被輸出成css，這樣的文件被稱作"sass局部文件"，即不會(huì)被多帶帶編譯輸出成css，用來被引入。

Sass局部文件需要以下劃線開頭，當(dāng)用@import引入時(shí)，不僅可以省略擴(kuò)展后綴，也可以省略開頭的下劃線。

所以，假設(shè)我們有一個(gè)"_nav.scss"和一個(gè)"article.scss"需要引入，那么我們僅僅這么寫就夠了:

@import "nav"
@import "article"

而且，sass的@import命令可以寫在CSS規(guī)則內(nèi)，這會(huì)使生成的CSS規(guī)則直接被插入到導(dǎo)入的地方。你可以把@import命令看做一個(gè)宏，寫在哪里，那里就被要導(dǎo)入的sass文件源代碼替換。

導(dǎo)入機(jī)制能讓你的sass根據(jù)某種依據(jù)分成幾個(gè)板塊（如根據(jù)不同的區(qū)域），那么導(dǎo)入某個(gè)sass文件，這個(gè)文件完全決定了這部分的樣式，如顏色、字體、字號(hào)等。

而你想讓導(dǎo)入后，還能修改一些值以定制自己需要的樣式，比如顏色、大小等，尤其是當(dāng)小明想導(dǎo)入你的sass文件時(shí)，可能被導(dǎo)入的樣式設(shè)置不能很好滿足他自己的需求，這個(gè)時(shí)候有兩種做法：

小明在導(dǎo)入后，重新去聲明一遍想修改的變量，并且給一個(gè)新的值，寫在后面的值會(huì)覆蓋前面的；

你在你的sass源文件中用!default修飾變量值從而設(shè)置變量默認(rèn)值，再發(fā)布出去給別人用，如$link-color:red !default。這個(gè)時(shí)候小明如果僅僅引入不想改，那么就是這個(gè)值，如果他想改，就可以在任何一處重新聲明這個(gè)變量，那么就會(huì)變成小明的值。

兩種方式都要重新聲明，是不是“脫褲子放屁”呢？嗯，有點(diǎn)這個(gè)意思！區(qū)別在于：

變量值后面用!default修飾，就有了默認(rèn)值，這個(gè)變量不管在哪里被聲明，就會(huì)用聲明的值，這意味著，你可以在引入含有需要修改變量值的sass文件前，聲明這個(gè)變量為你要的值，后面引入的文件中的值不會(huì)覆蓋你聲明的變量值。

下面的任一情況都會(huì)導(dǎo)致使用CSS原生的@import機(jī)制：

被導(dǎo)入文件的名字以.css結(jié)尾；

被導(dǎo)入文件的名字是一個(gè)URL地址；

被導(dǎo)入文件的名字是CSS的url()值。

Sass的注釋有兩種形式，一種是來自CSS的注釋風(fēng)格，用*和`*`包裹，這種注釋當(dāng)Sass文件被編譯輸出css時(shí)是會(huì)輸出的，

另一種注釋方式是，以//開頭的單行注釋，這被稱為靜默注釋，因?yàn)檫@樣的注釋在被編譯輸出css時(shí)是不會(huì)被輸出到CSS文件中的，此外，這種注釋寫起來簡(jiǎn)單快捷啊。

保持條理性和可讀性的3種基本方式，拆分不同板塊的Sass文件，然后通過@import引入；嵌套選擇器和屬性，不但可以幫助增加層次和條理，還能減少打字量（變相減少了打字出錯(cuò)）；注釋永遠(yuǎn)是一個(gè)好習(xí)慣。