摘要：輸出的是這樣的可以看到，當(dāng)用繼承的樣式時(shí)，和也完全套用了的樣式，而且你會(huì)發(fā)現(xiàn)，規(guī)則并沒(méi)有被重復(fù)輸出，而且這樣的方式更符合我們對(duì)于這幾個(gè)選擇器的認(rèn)知如果你之前用過(guò)面向?qū)ο缶幊痰脑挕?/p>

Sass學(xué)習(xí)筆記持續(xù)整理中，開篇不講怎么安裝，sass是什么，這些搜索引擎會(huì)告訴你，我們從sass的作用開始講起，知道sass用來(lái)干什么，有什么作用，我們才能相信用sass的好處，并且時(shí)時(shí)刻刻想著sass的設(shè)計(jì)思維——Don"t Repeat Yourself。這一篇將闡述Sass如何利用變量、選擇器嵌套、混合器和選擇器繼承來(lái)幫我們又快又好地搞定CSS。

Sass的作用是，幫助我們更快地（又快）寫出具有高可維護(hù)性（又好）的CSS代碼。

直白點(diǎn)說(shuō)就是，用了sass，寫起樣式來(lái)，腳步帶風(fēng)，效率提升，另一方面，sass在保證你“車速”的同時(shí)，還盡量減少你“翻車”的概率，你的樣式代碼將變得具有更多的條理性，更少的啰嗦重復(fù)，修改起來(lái)也變得簡(jiǎn)單高效，不用ctrl+F查找然后替換所有，所以總結(jié)起來(lái)就是“又快又好”。

接下來(lái)我們就先來(lái)看一下sass是怎么解決冗余問(wèn)題的，涉及到具體的語(yǔ)法，日后再詳細(xì)展開。

/*冗余的樣式表*/
h1#brand {
    color:#1875e7;
}
#sidebar{
    background-color:#1875e7
}
ul.nav{
    float:right;
}
ul.nav li{
    float:left;
}
ul.nav li a{
    color:#111;
}
ul.nav li.current{
    font-weight:bold;
}
#header ul.nav{
    float:right;
}
#header ul.nav li{
    float:left;
    margin-right:10px;
}
... ...

Sass可以消除樣式表中的冗余，那么冗余有什么問(wèn)題，我打字快，我不怕冗余，是不是這樣？

冗余的問(wèn)題在于太妨礙效率，分開來(lái)說(shuō)就是兩個(gè)問(wèn)題：

寫起來(lái)費(fèi)勁，不斷重復(fù)寫選擇器，不斷重復(fù)寫相同的css規(guī)則，不斷重復(fù)地寫屬性值（比如某個(gè)顏色、某個(gè)大小值等）；

改起來(lái)要瘋，一旦一個(gè)地方的屬性值要改，往往要找到很多處都要改，而且如果是有關(guān)聯(lián)的屬性，比如某個(gè)顏色是根據(jù)另一個(gè)顏色值計(jì)算得到的，一旦改前一個(gè)顏色，后面的顏色也要改，這個(gè)時(shí)候因?yàn)橹挡灰粯?，并不能?jiǎn)單的ctrl+F查找去全局替換。

這樣的冗余問(wèn)題多了，你的樣式表，你自己都會(huì)看著心煩，因?yàn)楹苋菀壮鲥e(cuò)。

還記得剛學(xué)C的時(shí)候，算圓周長(zhǎng)和面積，老師說(shuō)，我們首先去定義一個(gè)常量P=3.14，這樣如果以后要算更精確的，就可以這里把“3.14”改成“3.14159”就可以了，不然就要去找到算式去一處一處改。

Sass讓我們的寫樣式也可以用變量，可以把任意的屬性值賦給變量，在一個(gè)地方（一般是你的樣式表靠前的位置）管理散落在各處的屬性值。

舉個(gè)場(chǎng)景，想象一下，你正在寫一套站點(diǎn)主題，包含5個(gè)主要顏色，其他任何元素的顏色都是從其中直接或者計(jì)算（間接）得到，所以這些以“#”開頭的顏色值遍布你的樣式表各個(gè)地方，可能運(yùn)用于某處的span標(biāo)簽內(nèi)的文字顏色，可能運(yùn)用于某處的div的背景，這個(gè)時(shí)候你想要修改配色嘗試一下，常規(guī)地直接在CSS樣式表上更改，你得改瘋，改完還一直懷疑，我是不是漏了哪里，而用sass只需要在開頭定義顏色變量值的地方，集中更改就可以了，這樣的更改，兩相比較，效率不是一個(gè)量級(jí)的。

//這樣是定義變量
$text-color-info:#121212;  
//然后可以這樣用
.txt{
    color:$text-color-info;
}

sass的變量名規(guī)范是這樣的，以“$”開頭，可包括所有可用于CSS類名的字符，包括下劃線和中劃線，而且方便的是，變量名中并不區(qū)分中劃線和下劃線，比如$pretty_girl和$pretty-girl是一樣的，沒(méi)差。

多層次選擇器的問(wèn)題在于重復(fù)寫選擇器，或者不斷地ctrl+c然后ctrl+v，然后可讀性也不強(qiáng)，尤其是不按一定次序?qū)?，最后修改起?lái)很不方便，比如把下面的類名"nav"改成"navg"，就需要改所有的“.nav”選擇器。

ul.nav{
    float:right;
}
ul.nav li{
    float:left;
}
ul.nav li a{
    color:#111;
}

Sass利用選擇器嵌套來(lái)幫我們解決上述問(wèn)題，如果用嵌套選擇器來(lái)寫，上面的幾條CSS會(huì)變成這樣：

ul.nav{
    float:right;
    li{
        float:left;
        a{
            color:#111;
        }
    }
}

條理性很清楚（當(dāng)然條理性和可讀性永遠(yuǎn)和程序猿的代碼編寫習(xí)慣相關(guān)），沒(méi)有選擇器的冗余，修改起來(lái)也會(huì)非常方便。

不停地要用到一段樣式，這樣的情景也是很常見(jiàn)的，比如我們要為警示性的提示信息寫一段樣式：

.danger-note{
    font-size: 10px;
    color: #e22;
}

然后在html文檔里，當(dāng)需要警示性的提示時(shí)，我們把類“danger-note”加到某一個(gè)標(biāo)簽上，然后它就有這樣的樣式了，哪里需要就去哪里加這個(gè)類，這是我們常規(guī)的做法。

那么，這樣做法有什么問(wèn)題呢，這樣的問(wèn)題在于類名一般具有語(yǔ)義，如何保持語(yǔ)義的同時(shí)還能復(fù)用代碼？此外，我們?nèi)绻贑SS中提煉出某段需要復(fù)用的代碼，我們需要?jiǎng)?chuàng)建一個(gè)類選擇器，然后回到html文檔里，去該去的地方加上這個(gè)類。

而Sass是怎么幫助我們復(fù)用一段樣式的呢？再說(shuō)回到學(xué)C的時(shí)候，有個(gè)東西叫“宏”，“宏”就是一個(gè)占位的標(biāo)志，用一開始定義的內(nèi)容去替換代碼中的“宏”標(biāo)志，其實(shí)Sass中的混合器也是差不多的。

我們可以這么去定義一個(gè)混合器，以@mixin開頭，后跟一個(gè)混合器名字，然后是CSS規(guī)則：

@mixin danger-note{
    font-size: 10px;
    color: #e22;
}

然后我們就可以用@include隨時(shí)復(fù)用這一段代碼了：

#notice{
    text-align:center;
    @include danger-note;
}

更強(qiáng)大的是，混合器和變量的結(jié)合使用，可以使混合器帶參數(shù)，用參數(shù)來(lái)決定使用什么樣式，amazing，簡(jiǎn)直和“函數(shù)”一樣。

/*定義混合器*/
@mixin danger-note($col:#e22){
    font-size: 10px;
    color: $col;
}
/*使用混合器*/  
#notice{
    text-align:center;
    @include danger-note(#d33);
}

上面的混合器帶了一個(gè)參數(shù)用于決定顏色值，具有一個(gè)默認(rèn)值#e22，也就是引入混合器不指定參數(shù)就用默認(rèn)值，這里我們傳入?yún)?shù)#d33，這樣我們的顏色最終是d33。

這可能是sass相比于上面的特性中最不好理解的特性了，我們已經(jīng)了解可以用混合器來(lái)復(fù)用一段樣式，但由于混合器被看做一個(gè)“宏”，所以其實(shí)是相同的一段代碼被添加到不同的地方了，必然這是會(huì)有重復(fù)和冗余的。

@mixin note{
    font-size: 10px;
    text-decoration: underline;
}
.danger-note{
    color:#e22;
    @include note;
}
.info-note{
    color:#2e2;
    @include note;
}

輸出的CSS是這樣的：

/*注意看里面重復(fù)的樣式代碼*/
.danger-note{
    color:#e22;
    font-size: 10px;
    text-decoration: underline;
}
.info-note{
    color:#2e2;
    font-size: 10px;
    text-decoration: underline;
}

上面的代碼首先定義一個(gè)note混合器，描述了字體大小和下劃線樣式，然后警告信息和常規(guī)信息引入這個(gè)混合器，各自的顏色又是獨(dú)立設(shè)置，看上去沒(méi)有什么問(wèn)題，但是這樣輸出的CSS代碼將造成冗余，因?yàn)槎蓟烊肓?b>note混合器的規(guī)則。

而且，這里的規(guī)則具有強(qiáng)烈的層次關(guān)系，因?yàn)椴还苁蔷嫘畔⑦€是常規(guī)信息，都具有note混合器定義的樣式，只是兩者的顏色不同，所以Sass引入了選擇器繼承。

選擇器繼承，讓一個(gè)選擇器能夠復(fù)用另一個(gè)選擇器的所有樣式，但又不重復(fù)輸出這些樣式。

.note{
    font-size: 10px;
    text-decoration: underline;
}
.danger-note{
    color:#e22;
    @extend .note;
}
.info-note{
    color:#2e2;
    @extend .note;
}

輸出的CSS是這樣的：

.note, .danger-note, .info-note{
    font-size: 10px;
    text-decoration: underline;
}
.danger-note{
    color:#e22;
}
.info-note{
    color:#2e2;
}

可以看到，當(dāng)用@extend繼承.note的樣式時(shí)，.danger-note和.info-note也完全套用了.note的樣式，而且你會(huì)發(fā)現(xiàn)，規(guī)則并沒(méi)有被重復(fù)輸出，而且這樣的方式更符合我們對(duì)于這幾個(gè)選擇器的認(rèn)知（如果你之前用過(guò)面向?qū)ο缶幊痰脑挘?/p>

而有時(shí)候我們其實(shí)并不需要父類在輸出文件中輸出（是不是很像抽象類），這個(gè)時(shí)候我們可以用占位符（以%開頭），比如上面的例子：

%note{
    font-size: 10px;
    text-decoration: underline;
}
.danger-note{
    color:#e22;
    @extend %note;
}
.info-note{
    color:#2e2;
    @extend %note;
}

生成的CSS：

.danger-note, .info-note{
    font-size: 10px;
    text-decoration: underline;
}
.danger-note{
    color:#e22;
}
.info-note{
    color:#2e2;
}

你會(huì)發(fā)現(xiàn)輸出的CSS中沒(méi)有為note輸出，占位選擇器能把常用的樣式保存在一處，且不影響任何一個(gè)類名，可以放心使用。

至此，我們了解到Sass的四大特性：變量、選擇器嵌套、混合器和選擇器繼承，并且了解它們是怎么幫助我們減少編寫樣式表時(shí)的冗余和提高我們的效率和質(zhì)量的，你可以暫時(shí)不去了解細(xì)節(jié)，畢竟這一篇只是想告訴大家Sass是怎么發(fā)揮作用的，接下來(lái)我們?cè)僮屑?xì)去探索下sass的語(yǔ)法，看sass到底是怎么寫的、有什么注意事項(xiàng)和一些這里還沒(méi)講到的技巧。