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

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

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

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

接下來我們就先來看一下sass是怎么解決冗余問題的，涉及到具體的語法，日后再詳細展開。

/*冗余的樣式表*/
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可以消除樣式表中的冗余，那么冗余有什么問題，我打字快，我不怕冗余，是不是這樣？

冗余的問題在于太妨礙效率，分開來說就是兩個問題：

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

改起來要瘋，一旦一個地方的屬性值要改，往往要找到很多處都要改，而且如果是有關聯(lián)的屬性，比如某個顏色是根據(jù)另一個顏色值計算得到的，一旦改前一個顏色，后面的顏色也要改，這個時候因為值不一樣，并不能簡單的ctrl+F查找去全局替換。

這樣的冗余問題多了，你的樣式表，你自己都會看著心煩，因為很容易出錯。

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

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

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

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

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

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

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

Sass利用選擇器嵌套來幫我們解決上述問題，如果用嵌套選擇器來寫，上面的幾條CSS會變成這樣：

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

條理性很清楚（當然條理性和可讀性永遠和程序猿的代碼編寫習慣相關），沒有選擇器的冗余，修改起來也會非常方便。

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

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

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

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

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

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

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

然后我們就可以用@include隨時復用這一段代碼了：

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

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

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

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

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

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

輸出的CSS是這樣的：

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

上面的代碼首先定義一個note混合器，描述了字體大小和下劃線樣式，然后警告信息和常規(guī)信息引入這個混合器，各自的顏色又是獨立設置，看上去沒有什么問題，但是這樣輸出的CSS代碼將造成冗余，因為都混入了note混合器的規(guī)則。

而且，這里的規(guī)則具有強烈的層次關系，因為不管是警告信息還是常規(guī)信息，都具有note混合器定義的樣式，只是兩者的顏色不同，所以Sass引入了選擇器繼承。

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

.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;
}

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

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

%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;
}

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

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