使用sass

1. 使用變量;

sass讓人們受益的一個(gè)重要特性就是它為css引入了變量。你可以把反復(fù)使用的css屬性值 定義成變量，然后通過變量名來引用它們，而無需重復(fù)書寫這一屬性值。或者，對于僅使用過一 次的屬性值，你可以賦予其一個(gè)易懂的變量名，讓人一眼就知道這個(gè)屬性值的用途。

sass使用$符號來標(biāo)識變量(老版本的sass使用!來標(biāo)識變量。改成$是多半因?yàn)?code>!highlight-color看起來太丑了。)，比如$highlight-color和$sidebar-width。為什么選擇$?符號呢？因?yàn)樗谜J(rèn)、更具美感，且在CSS中并無他用，不會導(dǎo)致與現(xiàn)存或未來的css語法沖突。

1-1. 變量聲明;

sass變量的聲明和css屬性的聲明很像：

$highlight-color: #F90;

這意味著變量$highlight-color現(xiàn)在的值是#F90。任何可以用作css屬性值的賦值都 可以用作sass的變量值，甚至是以空格分割的多個(gè)屬性值，如$basic-border: 1px solid black;，或以逗號分割的多個(gè)屬性值，如$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;。這時(shí)變 量還沒有生效，除非你引用這個(gè)變量——我們很快就會了解如何引用。

與CSS屬性不同，變量可以在css規(guī)則塊定義之外存在。當(dāng)變量定義在css規(guī)則塊內(nèi)，那么該變量只能在此規(guī)則塊內(nèi)使用。如果它們出現(xiàn)在任何形式的{...}塊中（如@media或者@font-face塊），情況也是如此：

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//編譯后

nav {
  width: 100px;
  color: #F90;
}

在這段代碼中，$nav-color這個(gè)變量定義在了規(guī)則塊外邊，所以在這個(gè)樣式表中都可以像?nav規(guī)則塊那樣引用它。$width這個(gè)變量定義在了nav的{ }規(guī)則塊內(nèi)，所以它只能在nav規(guī)則塊 內(nèi)使用。這意味著是你可以在樣式表的其他地方定義和使用$width變量，不會對這里造成影響。

只聲明變量其實(shí)沒啥用處，我們最終的目的還是使用它們。上例已介紹了如何使用?$nav-color和$width這兩個(gè)變量，接下來我們將進(jìn)一步探討變量的使用方法。

1-2. 變量引用;

凡是css屬性的標(biāo)準(zhǔn)值（比如說1px或者bold）可存在的地方，變量就可以使用。css生成時(shí)，變量會被它們的值所替代。之后，如果你需要一個(gè)不同的值，只需要改變這個(gè)變量的值，則所有引用此變量的地方生成的值都會隨之改變。

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

//編譯后

.selected {
  border: 1px solid #F90;
}

看上邊示例中的$highlight-color變量，它被直接賦值給border屬性，當(dāng)這段代碼被編譯輸出css時(shí)，$highlight-color會被#F90這一顏色值所替代。產(chǎn)生的效果就是給selected這個(gè)類一條1像素寬、實(shí)心且顏色值為#F90的邊框。

在聲明變量時(shí)，變量值也可以引用其他變量。當(dāng)你通過粒度區(qū)分，為不同的值取不同名字時(shí)，這相當(dāng)有用。下例在獨(dú)立的顏色值粒度上定義了一個(gè)變量，且在另一個(gè)更復(fù)雜的邊框值粒度上也定義了一個(gè)變量：

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

//編譯后

.selected {
  border: 1px solid #F90;
}

這里，$highlight-border變量的聲明中使用了$highlight-color這個(gè)變量。產(chǎn)生的效 果就跟你直接為border屬性設(shè)置了一個(gè)1px?$highlight-color solid的值是一樣的。 最后，我們來了解一下變量命名的實(shí)用技巧，以結(jié)束關(guān)于變量的介紹。

1-3. 變量名用中劃線還是下劃線分隔;

sass的變量名可以與css中的屬性名和選擇器名稱相同，包括中劃線和下劃線。這完全取決于個(gè)人的喜好，有些人喜歡使用中劃線來分隔變量中的多個(gè)詞（如$highlight-color），而有些人喜歡使用下劃線（如$highlight_color）。使用中劃線的方式更為普遍，這也是compass和本文都用的方式。

不過，sass并不想強(qiáng)迫任何人一定使用中劃線或下劃線，所以這兩種用法相互兼容。用中劃線聲明的變量可以使用下劃線的方式引用，反之亦然。這意味著即使compass選擇用中劃線的命名方式，這并不影響你在使用compass的樣式中用下劃線的命名方式進(jìn)行引用：

$link-color: blue;
a {
  color: $link_color;
}

//編譯后

a {
  color: blue;
}

在上例中，$link-color和$link_color其實(shí)指向的是同一個(gè)變量。實(shí)際上，在sass的大 多數(shù)地方，中劃線命名的內(nèi)容和下劃線命名的內(nèi)容是互通的，除了變量，也包括對混合器和Sass函數(shù)的命名。但是在sass中純css部分不互通，比如類名、ID或?qū)傩悦?/p>

盡管變量自身提供了很多有用的地方，但是sass基于變量提供的更為強(qiáng)大的工具才是我們關(guān)注的焦點(diǎn)。只有當(dāng)變量與sass的其他特性一起使用時(shí)，才能發(fā)揮其全部的潛能。接下來，我們將探討其中一個(gè)非常重要的特性，即規(guī)則嵌套。

2. 嵌套CSS 規(guī)則;

css中重復(fù)寫選擇器是非常惱人的。如果要寫一大串指向頁面中同一塊的樣式時(shí)，往往需要 一遍又一遍地寫同一個(gè)ID：

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

像這種情況，sass可以讓你只寫一遍，且使樣式可讀性更高。在Sass中，你可以像俄羅斯套娃那樣在規(guī)則塊中嵌套規(guī)則塊。sass在輸出css時(shí)會幫你把這些嵌套規(guī)則處理好，避免你的重復(fù)書寫。

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

 /* 編譯后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

上邊的例子，會在輸出css時(shí)把它轉(zhuǎn)換成跟你之前看到的一樣的效果。這個(gè)過程中，sass用了兩步，每一步都是像打開俄羅斯套娃那樣把里邊的嵌套規(guī)則塊一個(gè)個(gè)打開。首先，把#content（父級）這個(gè)id放到article選擇器（子級）和aside選擇器（子級）的前邊：

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  #content aside { background-color: #EEE }
}

 /* 編譯后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

然后，#content article里邊還有嵌套的規(guī)則，sass重復(fù)一遍上邊的步驟，把新的選擇器添加到內(nèi)嵌的選擇器前邊。

一個(gè)給定的規(guī)則塊，既可以像普通的CSS那樣包含屬性，又可以嵌套其他規(guī)則塊。當(dāng)你同時(shí)要為一個(gè)容器元素及其子元素編寫特定樣式時(shí)，這種能力就非常有用了。

#content {
  background-color: #f5f5f5;
  aside { background-color: #eee }
}

容器元素的樣式規(guī)則會被單獨(dú)抽離出來，而嵌套元素的樣式規(guī)則會像容器元素沒有包含任何屬性時(shí)那樣被抽離出來。

#content { background-color: #f5f5f5 }
#content aside { background-color: #eee }

大多數(shù)情況下這種簡單的嵌套都沒問題，但是有些場景下不行，比如你想要在嵌套的選擇器 里邊立刻應(yīng)用一個(gè)類似于：hover的偽類。為了解決這種以及其他情況，sass提供了一個(gè)特殊結(jié) 構(gòu)&。

2-1. 父選擇器的標(biāo)識符&;

一般情況下，sass在解開一個(gè)嵌套規(guī)則時(shí)就會把父選擇器（#content）通過一個(gè)空格連接到子選擇器的前邊（article和aside）形成（#content article和#content aside）。這種在CSS里邊被稱為后代選擇器，因?yàn)樗x擇ID為content的元素內(nèi)所有命中選擇器article和aside的元素。但在有些情況下你卻不會希望sass使用這種后代選擇器的方式生成這種連接。

最常見的一種情況是當(dāng)你為鏈接之類的元素寫：hover這種偽類時(shí)，你并不希望以后代選擇器的方式連接。比如說，下面這種情況sass就無法正常工作：

article a {
  color: blue;
  :hover { color: red }
}

這意味著color: red這條規(guī)則將會被應(yīng)用到選擇器article a :hover，article元素內(nèi)鏈接的所有子元素在被hover時(shí)都會變成紅色。這是不正確的！你想把這條規(guī)則應(yīng)用到超鏈接自身，而后代選擇器的方式無法幫你實(shí)現(xiàn)。

解決之道為使用一個(gè)特殊的sass選擇器，即父選擇器。在使用嵌套規(guī)則時(shí)，父選擇器能對于嵌套規(guī)則如何解開提供更好的控制。它就是一個(gè)簡單的&符號，且可以放在任何一個(gè)選擇器可出現(xiàn)的地方，比如h1放在哪，它就可以放在哪。

article a {
  color: blue;
  &:hover { color: red }
}

當(dāng)包含父選擇器標(biāo)識符的嵌套規(guī)則被打開時(shí)，它不會像后代選擇器那樣進(jìn)行拼接，而是&被父選擇器直接替換：

article a { color: blue }
article a:hover { color: red }

在為父級選擇器添加：hover等偽類時(shí)，這種方式非常有用。同時(shí)父選擇器標(biāo)識符還有另外一種用法，你可以在父選擇器之前添加選擇器。舉例來說，當(dāng)用戶在使用IE瀏覽器時(shí)，你會通過JavaScript在<body>標(biāo)簽上添加一個(gè)ie的類名，為這種情況編寫特殊的樣式如下：

#content aside {
  color: red;
  body.ie & { color: green }
}

/*編譯后*/
#content aside {color: red};
body.ie #content aside { color: green }

sass在選擇器嵌套上是非常智能的，即使是帶有父選擇器的情況。當(dāng)sass遇到群組選擇器（由多個(gè)逗號分隔開的選擇器形成）也能完美地處理這種嵌套。

2-2. 群組選擇器的嵌套;

在CSS里邊，選擇器h1``h2和h3會同時(shí)命中h1元素、h2元素和h3元素。與此類似，.button?button會命中button元素和類名為.button的元素。這種選擇器稱為群組選擇器。群組選擇器 的規(guī)則會對命中群組中任何一個(gè)選擇器的元素生效。

.button, button {
  margin: 0;
}

當(dāng)看到上邊這段代碼時(shí)，你可能還沒意識到會有重復(fù)性的工作。但會很快發(fā)現(xiàn)：如果你需要在一個(gè)特定的容器元素內(nèi)對這樣一個(gè)群組選擇器進(jìn)行修飾，情況就不同了。css的寫法會讓你在群組選擇器中的每一個(gè)選擇器前都重復(fù)一遍容器元素的選擇器。

.container h1, .container h2, .container h3 { margin-bottom: .8em }

非常幸運(yùn)，sass的嵌套特性在這種場景下也非常有用。當(dāng)sass解開一個(gè)群組選擇器規(guī)則內(nèi)嵌的規(guī)則時(shí)，它會把每一個(gè)內(nèi)嵌選擇器的規(guī)則都正確地解出來：

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

首先sass將.container和h1``.container和h2``.container和h3分別組合，然后將三 者重新組合成一個(gè)群組選擇器，生成你前邊看到的普通css樣式。對于內(nèi)嵌在群組選擇器內(nèi)的嵌 套規(guī)則，處理方式也一樣：

nav, aside {
  a {color: blue}
}

首先sass將nav和a``aside和a分別組合，然后將二者重新組合成一個(gè)群組選擇器：

nav a, aside a {color: blue}

處理這種群組選擇器規(guī)則嵌套上的強(qiáng)大能力，正是sass在減少重復(fù)敲寫方面的貢獻(xiàn)之一。尤其在當(dāng)嵌套級別達(dá)到兩層甚至三層以上時(shí)，與普通的css編寫方式相比，只寫一遍群組選擇器大大減少了工作量。

有利必有弊，你需要特別注意群組選擇器的規(guī)則嵌套生成的css。雖然sass讓你的樣式表看上去很小，但實(shí)際生成的css卻可能非常大，這會降低網(wǎng)站的速度。

關(guān)于選擇器嵌套的最后一個(gè)方面，我們看看sass如何處理組合選擇器，比如>、+和~的使用。你將看到，這種場景下你甚至無需使用父選擇器標(biāo)識符。

2-3. 子組合選擇器和同層組合選擇器：>、+和~;

上邊這三個(gè)組合選擇器必須和其他選擇器配合使用，以指定瀏覽器僅選擇某種特定上下文中的元素。

article section { margin: 5px }
article > section { border: 1px solid #ccc }

你可以用子組合選擇器>選擇一個(gè)元素的直接子元素。上例中，第一個(gè)選擇器會選擇article下的所有命中section選擇器的元素。第二個(gè)選擇器只會選擇article下緊跟著的子元素中命中section選擇器的元素。

在下例中，你可以用同層相鄰組合選擇器+選擇header元素后緊跟的p元素：

header + p { font-size: 1.1em }

你也可以用同層全體組合選擇器~，選擇所有跟在article后的同層article元素，不管它們之間隔了多少其他元素：

article ~ article { border-top: 1px dashed #ccc }

這些組合選擇器可以毫不費(fèi)力地應(yīng)用到sass的規(guī)則嵌套中?？梢园阉鼈兎旁谕鈱舆x擇器后邊，或里層選擇器前邊：

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

sass會如你所愿地將這些嵌套規(guī)則一一解開組合在一起：

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

在sass中，不僅僅css規(guī)則可以嵌套，對屬性進(jìn)行嵌套也可以減少很多重復(fù)性的工作。

2-4. 嵌套屬性;

在sass中，除了CSS選擇器，屬性也可以進(jìn)行嵌套。盡管編寫屬性涉及的重復(fù)不像編寫選擇器那么糟糕，但是要反復(fù)寫border-style``border-width``border-color以及border-*等也是非常煩人的。在sass中，你只需敲寫一遍border：

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

嵌套屬性的規(guī)則是這樣的：把屬性名從中劃線-的地方斷開，在根屬性后邊添加一個(gè)冒號:，緊跟一個(gè){ }塊，把子屬性部分寫在這個(gè){ }塊中。就像css選擇器嵌套一樣，sass會把你的子屬性一一解開，把根屬性和子屬性部分通過中劃線-連接起來，最后生成的效果與你手動一遍遍寫的css樣式一樣：

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

對于屬性的縮寫形式，你甚至可以像下邊這樣來嵌套，指明例外規(guī)則：

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

這比下邊這種同等樣式的寫法要好：

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

屬性和選擇器嵌套是非常偉大的特性，因?yàn)樗鼈儾粌H大大減少了你的編寫量，而且通過視覺上的縮進(jìn)使你編寫的樣式結(jié)構(gòu)更加清晰，更易于閱讀和開發(fā)。

即便如此，隨著你的樣式表變得越來越大，這種寫法也很難保持結(jié)構(gòu)清晰。有時(shí)，處理這種大量樣式的唯一方法就是把它們分拆到多個(gè)文件中。sass通過對css原有@import規(guī)則的改進(jìn)直接支持了這一特性。

3. 導(dǎo)入SASS文件;

css有一個(gè)特別不常用的特性，即@import規(guī)則，它允許在一個(gè)css文件中導(dǎo)入其他css文件。然而，后果是只有執(zhí)行到@import時(shí)，瀏覽器才會去下載其他css文件，這導(dǎo)致頁面加載起來特別慢。

sass也有一個(gè)@import規(guī)則，但不同的是，sass的@import規(guī)則在生成css文件時(shí)就把相關(guān)文件導(dǎo)入進(jìn)來。這意味著所有相關(guān)的樣式被歸納到了同一個(gè)css文件中，而無需發(fā)起額外的下載請求。另外，所有在被導(dǎo)入文件中定義的變量和混合器（參見2.5節(jié)）均可在導(dǎo)入文件中使用。

使用sass的@import規(guī)則并不需要指明被導(dǎo)入文件的全名。你可以省略.sass或.scss文件后綴（見下圖）。這樣，在不修改樣式表的前提下，你完全可以隨意修改你或別人寫的被導(dǎo)入的sass樣式文件語法，在sass和scss語法之間隨意切換。舉例來說，@import"sidebar";這條命令將把sidebar.scss文件中所有樣式添加到當(dāng)前樣式表中。

本節(jié)將介紹如何使用sass的@import來處理多個(gè)sass文件。首先，我們將學(xué)習(xí)編寫那些被導(dǎo)入的sass文件，因?yàn)樵谝粋€(gè)大型sass項(xiàng)目中，這樣的文件是你最常編寫的那一類。接著，了解集中導(dǎo)入sass文件的方法，使你的樣式可重用性更高，包括聲明可自定義的變量值，以及在某一個(gè)選擇器范圍內(nèi)導(dǎo)入sass文件。最后，介紹如何在sass中使用css原生的@import命令。

通常，有些sass文件用于導(dǎo)入，你并不希望為每個(gè)這樣的文件單獨(dú)地生成一個(gè)css文件。對此，sass用一個(gè)特殊的約定來解決。

3-1. 使用SASS部分文件;

當(dāng)通過@import把sass樣式分散到多個(gè)文件時(shí)，你通常只想生成少數(shù)幾個(gè)css文件。那些專門為@import命令而編寫的sass文件，并不需要生成對應(yīng)的獨(dú)立css文件，這樣的sass文件稱為局部文件。對此，sass有一個(gè)特殊的約定來命名這些文件。

此約定即，sass局部文件的文件名以下劃線開頭。這樣，sass就不會在編譯時(shí)單獨(dú)編譯這個(gè)文件輸出css，而只把這個(gè)文件用作導(dǎo)入。當(dāng)你@import一個(gè)局部文件時(shí)，還可以不寫文件的全名，即省略文件名開頭的下劃線。舉例來說，你想導(dǎo)入themes/_night-sky.scss這個(gè)局部文件里的變量，你只需在樣式表中寫@import``"themes/night-sky";。

局部文件可以被多個(gè)不同的文件引用。當(dāng)一些樣式需要在多個(gè)頁面甚至多個(gè)項(xiàng)目中使用時(shí)，這非常有用。在這種情況下，有時(shí)需要在你的樣式表中對導(dǎo)入的樣式稍作修改，sass有一個(gè)功能剛好可以解決這個(gè)問題，即默認(rèn)變量值。

3-2. 默認(rèn)變量值;

一般情況下，你反復(fù)聲明一個(gè)變量，只有最后一處聲明有效且它會覆蓋前邊的值。舉例說明：

$link-color: blue;
$link-color: red;
a {
color: $link-color;
}

在上邊的例子中，超鏈接的color會被設(shè)置為red。這可能并不是你想要的結(jié)果，假如你寫了一個(gè)可被他人通過@import導(dǎo)入的sass庫文件，你可能希望導(dǎo)入者可以定制修改sass庫文件中的某些值。使用sass的!default標(biāo)簽可以實(shí)現(xiàn)這個(gè)目的。它很像css屬性中!important標(biāo)簽的對立面，不同的是!default用于變量，含義是：如果這個(gè)變量被聲明賦值了，那就用它聲明的值，否則就用這個(gè)默認(rèn)值。

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

在上例中，如果用戶在導(dǎo)入你的sass局部文件之前聲明了一個(gè)$fancybox-width變量，那么你的局部文件中對$fancybox-width賦值400px的操作就無效。如果用戶沒有做這樣的聲明，則$fancybox-width將默認(rèn)為400px。

接下來我們將學(xué)習(xí)嵌套導(dǎo)入，它允許只在某一個(gè)選擇器的范圍內(nèi)導(dǎo)入sass局部文件。

3-3. 嵌套導(dǎo)入;

跟原生的css不同，sass允許@import命令寫在css規(guī)則內(nèi)。這種導(dǎo)入方式下，生成對應(yīng)的css文件時(shí)，局部文件會被直接插入到css規(guī)則內(nèi)導(dǎo)入它的地方。舉例說明，有一個(gè)名為_blue-theme.scss的局部文件，內(nèi)容如下：

aside {
  background: blue;
  color: white;
}

然后把它導(dǎo)入到一個(gè)CSS規(guī)則內(nèi)，如下所示：

.blue-theme {@import "blue-theme"}

//生成的結(jié)果跟你直接在.blue-theme選擇器內(nèi)寫_blue-theme.scss文件的內(nèi)容完全一樣。

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

被導(dǎo)入的局部文件中定義的所有變量和混合器，也會在這個(gè)規(guī)則范圍內(nèi)生效。這些變量和混合器不會全局有效，這樣我們就可以通過嵌套導(dǎo)入只對站點(diǎn)中某一特定區(qū)域運(yùn)用某種顏色主題或其他通過變量配置的樣式。

有時(shí)，可用css原生的@import機(jī)制，在瀏覽器中下載必需的css文件。sass也提供了幾種方法來達(dá)成這種需求。

3-4. 原生的CSS導(dǎo)入;

由于sass兼容原生的css，所以它也支持原生的CSS@import。盡管通常在sass中使用@import時(shí)，sass會嘗試找到對應(yīng)的sass文件并導(dǎo)入進(jìn)來，但在下列三種情況下會生成原生的CSS@import，盡管這會造成瀏覽器解析css時(shí)的額外下載：

• 被導(dǎo)入文件的名字以.css結(jié)尾；
• 被導(dǎo)入文件的名字是一個(gè)URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字體API提供的相應(yīng)服務(wù)；
• 被導(dǎo)入文件的名字是CSS的url()值。

這就是說，你不能用sass的@import直接導(dǎo)入一個(gè)原始的css文件，因?yàn)?code>sass會認(rèn)為你想用css原生的@import。但是，因?yàn)?code>sass的語法完全兼容css，所以你可以把原始的css文件改名為.scss后綴，即可直接導(dǎo)入了。

文件導(dǎo)入是保證sass的代碼可維護(hù)性和可讀性的重要一環(huán)。次之但亦非常重要的就是注釋了。注釋可以幫助樣式作者記錄寫sass的過程中的想法。在原生的css中，注釋對于其他人是直接可見的，但sass提供了一種方式可在生成的css文件中按需抹掉相應(yīng)的注釋。

4. 靜默注釋;

css中注釋的作用包括幫助你組織樣式、以后你看自己的代碼時(shí)明白為什么這樣寫，以及簡單的樣式說明。但是，你并不希望每個(gè)瀏覽網(wǎng)站源碼的人都能看到所有注釋。

sass另外提供了一種不同于css標(biāo)準(zhǔn)注釋格式/* ... */的注釋語法，即靜默注釋，其內(nèi)容不會出現(xiàn)在生成的css文件中。靜默注釋的語法跟JavaScript``Java等類C的語言中單行注釋的語法相同，它們以//開頭，注釋內(nèi)容直到行末。

body {
  color: #333; // 這種注釋內(nèi)容不會出現(xiàn)在生成的css文件中
  padding: 0; /* 這種注釋內(nèi)容會出現(xiàn)在生成的css文件中 */
}

實(shí)際上，css的標(biāo)準(zhǔn)注釋格式/* ... */內(nèi)的注釋內(nèi)容亦可在生成的css文件中抹去。當(dāng)注釋出現(xiàn)在原生css不允許的地方，如在css屬性或選擇器中，sass將不知如何將其生成到對應(yīng)css文件中的相應(yīng)位置，于是這些注釋被抹掉。

body {
  color /* 這塊注釋內(nèi)容不會出現(xiàn)在生成的css中 */: #333;
  padding: 1; /* 這塊注釋內(nèi)容也不會出現(xiàn)在生成的css中 */ 0;
}

你已經(jīng)掌握了sass的靜默注釋，了解了保持sass條理性和可讀性的最基本的三個(gè)方法：嵌套、導(dǎo)入和注釋?，F(xiàn)在，我們要進(jìn)一步學(xué)習(xí)新特性，這樣我們不但能保持條理性還能寫出更好的樣式。首先要介紹的內(nèi)容是：使用混合器抽象你的相關(guān)樣式。

5. 混合器;

如果你的整個(gè)網(wǎng)站中有幾處小小的樣式類似（例如一致的顏色和字體），那么使用變量來統(tǒng)一處理這種情況是非常不錯(cuò)的選擇。但是當(dāng)你的樣式變得越來越復(fù)雜，你需要大段大段的重用樣式的代碼，獨(dú)立的變量就沒辦法應(yīng)付這種情況了。你可以通過sass的混合器實(shí)現(xiàn)大段樣式的重用。

混合器使用@mixin標(biāo)識符定義?？瓷先ズ芟衿渌?code>CSS @標(biāo)識符，比如說@media或者@font-face。這個(gè)標(biāo)識符給一大段樣式賦予一個(gè)名字，這樣你就可以輕易地通過引用這個(gè)名字重用這段樣式。下邊的這段sass代碼，定義了一個(gè)非常簡單的混合器，目的是添加跨瀏覽器的圓角邊框。

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

然后就可以在你的樣式表中通過@include來使用這個(gè)混合器，放在你希望的任何地方。@include調(diào)用會把混合器中的所有樣式提取出來放在@include被調(diào)用的地方。如果像下邊這樣寫：

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

//sass最終生成：

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

在.notice中的屬性border-radius``-moz-border-radius和-webkit-border-radius全部來自rounded-corners這個(gè)混合器。這一節(jié)將介紹使用混合器來避免重復(fù)。通過使用參數(shù)，你可以使用混合器把你樣式中的通用樣式抽離出來，然后輕松地在其他地方重用。實(shí)際上，混合器太好用了，一不小心你可能會過度使用。大量的重用可能會導(dǎo)致生成的樣式表過大，導(dǎo)致加載緩慢。所以，首先我們將討論混合器的使用場景，避免濫用。

5-1. 何時(shí)使用混合器;

利用混合器，可以很容易地在樣式表的不同地方共享樣式。如果你發(fā)現(xiàn)自己在不停地重復(fù)一段樣式，那就應(yīng)該把這段樣式構(gòu)造成優(yōu)良的混合器，尤其是這段樣式本身就是一個(gè)邏輯單元，比如說是一組放在一起有意義的屬性。

判斷一組屬性是否應(yīng)該組合成一個(gè)混合器，一條經(jīng)驗(yàn)法則就是你能否為這個(gè)混合器想出一個(gè)好的名字。如果你能找到一個(gè)很好的短名字來描述這些屬性修飾的樣式，比如rounded-corners``fancy-font或者no-bullets，那么往往能夠構(gòu)造一個(gè)合適的混合器。如果你找不到，這時(shí)候構(gòu)造一個(gè)混合器可能并不合適。

混合器在某些方面跟css類很像。都是讓你給一大段樣式命名，所以在選擇使用哪個(gè)的時(shí)候可能會產(chǎn)生疑惑。最重要的區(qū)別就是類名是在html文件中應(yīng)用的，而混合器是在樣式表中應(yīng)用的。這就意味著類名具有語義化含義，而不僅僅是一種展示性的描述：用來描述html元素的含義而不是html元素的外觀。而另一方面，混合器是展示性的描述，用來描述一條css規(guī)則應(yīng)用之后會產(chǎn)生怎樣的效果。

在之前的例子中，.notice是一個(gè)有語義的類名。如果一個(gè)html元素有一個(gè)notice的類名，就表明了這個(gè)html元素的用途：向用戶展示提醒信息。rounded-corners混合器是展示性的，它描述了包含它的css規(guī)則最終的視覺樣式，尤其是邊框角的視覺樣式?；旌掀骱皖惻浜鲜褂脤懗稣麧嵉?code>html和css，因?yàn)槭褂谜Z義化的類名亦可以幫你避免重復(fù)使用混合器。為了保持你的html和css的易讀性和可維護(hù)性，在寫樣式的過程中一定要銘記二者的區(qū)別。

有時(shí)候僅僅把屬性放在混合器中還遠(yuǎn)遠(yuǎn)不夠，可喜的是，sass同樣允許你把css規(guī)則放在混合器中。

5-2. 混合器中的CSS規(guī)則;

混合器中不僅可以包含屬性，也可以包含css規(guī)則，包含選擇器和選擇器中的屬性，如下代碼:

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

當(dāng)一個(gè)包含css規(guī)則的混合器通過@include包含在一個(gè)父規(guī)則中時(shí)，在混合器中的規(guī)則最終會生成父規(guī)則中的嵌套規(guī)則。舉個(gè)例子，看看下邊的sass代碼，這個(gè)例子中使用了no-bullets這個(gè)混合器：

ul.plain {
  color: #444;
  @include no-bullets;
}

sass的@include指令會將引入混合器的那行代碼替換成混合器里邊的內(nèi)容。最終，上邊的例子如下代碼:

ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

混合器中的規(guī)則甚至可以使用sass的父選擇器標(biāo)識符&。使用起來跟不用混合器時(shí)一樣，sass解開嵌套規(guī)則時(shí)，用父規(guī)則中的選擇器替代&。

如果一個(gè)混合器只包含css規(guī)則，不包含屬性，那么這個(gè)混合器就可以在文檔的頂部調(diào)用，寫在所有的css規(guī)則之外。如果你只是為自己寫一些混合器，這并沒有什么大的用途，但是當(dāng)你使用一個(gè)類似于Compass的庫時(shí)，你會發(fā)現(xiàn)，這是提供樣式的好方法，原因在于你可以選擇是否使用這些樣式。

接下來你將學(xué)習(xí)如何通過給混合器傳參數(shù)來讓混合器變得更加靈活和可重用。

5-3. 給混合器傳參;

混合器并不一定總得生成相同的樣式。可以通過在@include混合器時(shí)給混合器傳參，來定制混合器生成的精確樣式。當(dāng)@include混合器時(shí)，參數(shù)其實(shí)就是可以賦值給css屬性值的變量。如果你寫過JavaScript，這種方式跟JavaScript的function很像：

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

當(dāng)混合器被@include時(shí)，你可以把它當(dāng)作一個(gè)css函數(shù)來傳參。如果你像下邊這樣寫：

a {
  @include link-colors(blue, red, green);
}

//Sass最終生成的是：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

當(dāng)你@include混合器時(shí)，有時(shí)候可能會很難區(qū)分每個(gè)參數(shù)是什么意思，參數(shù)之間是一個(gè)什么樣的順序。為了解決這個(gè)問題，sass允許通過語法$name: value的形式指定每個(gè)參數(shù)的值。這種形式的傳參，參數(shù)順序就不必再在乎了，只需要保證沒有漏掉參數(shù)即可：

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

盡管給混合器加參數(shù)來實(shí)現(xiàn)定制很好，但是有時(shí)有些參數(shù)我們沒有定制的需要，這時(shí)候也需要賦值一個(gè)變量就變成很痛苦的事情了。所以sass允許混合器聲明時(shí)給參數(shù)賦默認(rèn)值。

5-4. 默認(rèn)參數(shù)值;

為了在@include混合器時(shí)不必傳入所有的參數(shù)，我們可以給參數(shù)指定一個(gè)默認(rèn)值。參數(shù)默認(rèn)值使用$name: default-value的聲明形式，默認(rèn)值可以是任何有效的css屬性值，甚至是其他參數(shù)的引用，如下代碼：

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

如果像下邊這樣調(diào)用：@include link-colors(red)?$hover和$visited也會被自動賦值為red。

混合器只是sass樣式重用特性中的一個(gè)。我們已經(jīng)了解到混合器主要用于樣式展示層的重用，如果你想重用語義化的類呢？這就涉及sass的另一個(gè)重要的重用特性：選擇器繼承。

6. 使用選擇器繼承來精簡CSS;

使用sass的時(shí)候，最后一個(gè)減少重復(fù)的主要特性就是選擇器繼承?；?code>Nicole Sullivan面向?qū)ο蟮?code>css的理念，選擇器繼承是說一個(gè)選擇器可以繼承為另一個(gè)選擇器定義的所有樣式。這個(gè)通過@extend語法實(shí)現(xiàn)，如下代碼:

//通過選擇器繼承繼承樣式
.error {
  border: 1px red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

在上邊的代碼中，.seriousError將會繼承樣式表中任何位置處為.error定義的所有樣式。以class="seriousError"?修飾的html元素最終的展示效果就好像是class="seriousError error"。相關(guān)元素不僅會擁有一個(gè)3px寬的邊框，而且這個(gè)邊框?qū)⒆兂杉t色的，這個(gè)元素同時(shí)還會有一個(gè)淺紅色的背景，因?yàn)檫@些都是在.error里邊定義的樣式。

.seriousError不僅會繼承.error自身的所有樣式，任何跟.error有關(guān)的組合選擇器樣式也會被.seriousError以組合選擇器的形式繼承，如下代碼:

//.seriousError從.error繼承樣式
.error a{  //應(yīng)用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //應(yīng)用到hl.seriousError
  font-size: 1.2rem;
}

如上所示，在class="seriousError"的html元素內(nèi)的超鏈接也會變成紅色和粗體。

本節(jié)將介紹與混合器相比，哪種情況下更適合用繼承。接下來在探索繼承的工作細(xì)節(jié)之前，我們先了解一下繼承的高級用法。最后，我們將看看使用繼承可能會有哪些坑，學(xué)習(xí)如何避免這些坑。

6-1. 何時(shí)使用繼承;

5-1節(jié)介紹了混合器主要用于展示性樣式的重用，而類名用于語義化樣式的重用。因?yàn)槔^承是基于類的（有時(shí)是基于其他類型的選擇器），所以繼承應(yīng)該是建立在語義化的關(guān)系上。當(dāng)一個(gè)元素?fù)碛械念悾ū热缯f.seriousError）表明它屬于另一個(gè)類（比如說.error），這時(shí)使用繼承再合適不過了。

這有點(diǎn)抽象，所以我們從幾個(gè)方面來闡釋一下。想象一下你正在編寫一個(gè)頁面，給html元素添加類名，你發(fā)現(xiàn)你的某個(gè)類（比如說.seriousError）另一個(gè)類（比如說.error）的細(xì)化。你會怎么做？

• 你可以為這兩個(gè)類分別寫相同的樣式，但是如果有大量的重復(fù)怎么辦？使用sass時(shí)，我們提倡的就是不要做重復(fù)的工作。
• 你可以使用一個(gè)選擇器組（比如說.error``.seriousError）給這兩個(gè)選擇器寫相同的樣式。如果.error的所有樣式都在同一個(gè)地方，這種做法很好，但是如果是分散在樣式表的不同地方呢？再這樣做就困難多了。
• 你可以使用一個(gè)混合器為這兩個(gè)類提供相同的樣式，但當(dāng).error的樣式修飾遍布樣式表中各處時(shí)，這種做法面臨著跟使用選擇器組一樣的問題。這兩個(gè)類也不是恰好有相同的 樣式。你應(yīng)該更清晰地表達(dá)這種關(guān)系。
• 綜上所述你應(yīng)該使用@extend。讓.seriousError從.error繼承樣式，使兩者之間的關(guān)系非常清晰。更重要的是無論你在樣式表的哪里使用.error``.seriousError都會繼承其中的樣式。

現(xiàn)在你已經(jīng)更好地掌握了何時(shí)使用繼承，以及繼承有哪些突出的優(yōu)點(diǎn)，接下來我們看看一些高級用法。

6-2. 繼承的高級用法;

任何css規(guī)則都可以繼承其他規(guī)則，幾乎任何css規(guī)則也都可以被繼承。大多數(shù)情況你可能只想對類使用繼承，但是有些場合你可能想做得更多。最常用的一種高級用法是繼承一個(gè)html元素的樣式。盡管默認(rèn)的瀏覽器樣式不會被繼承，因?yàn)樗鼈儾粚儆跇邮奖碇械臉邮?，但是你?code>html元素添加的所有樣式都會被繼承。

接下來的這段代碼定義了一個(gè)名為disabled的類，樣式修飾使它看上去像一個(gè)灰掉的超鏈接。通過繼承a這一超鏈接元素來實(shí)現(xiàn)：

.disabled {
  color: gray;
  @extend a;
}

假如一條樣式規(guī)則繼承了一個(gè)復(fù)雜的選擇器，那么它只會繼承這個(gè)復(fù)雜選擇器命中的元素所應(yīng)用的樣式。舉例來說， 如果.seriousError``@extend``.important.error?， 那么.important.error?和h1.important.error的樣式都會被.seriousError繼承， 但是.important或者.error下的樣式則不會被繼承。這種情況下你很可能希望.seriousError能夠分別繼承.important或者.error下的樣式。

如果一個(gè)選擇器序列（#main .seriousError）@extend另一個(gè)選擇器（.error），那么只有完全命中#main .seriousError這個(gè)選擇器的元素才會繼承.error的樣式，就像單個(gè)類 名繼承那樣。擁有class="seriousError"的.main元素之外的元素不會受到影響。

像#main .error這種選擇器序列是不能被繼承的。這是因?yàn)閺?code>#main .error中繼承的樣式一般情況下會跟直接從.error中繼承的樣式基本一致，細(xì)微的區(qū)別往往使人迷惑。

現(xiàn)在你已經(jīng)了解了通過繼承能夠做些什么事情，接下來我們將學(xué)習(xí)繼承的工作細(xì)節(jié)，在生成對應(yīng)css的時(shí)候，sass具體干了些什么事情。

6-3. 繼承的工作細(xì)節(jié);

跟變量和混合器不同，繼承不是僅僅用css樣式替換@extend處的代碼那么簡單。為了不讓你對生成的css感覺奇怪，對這背后的工作原理有一定了解是非常重要的。

@extend背后最基本的想法是，如果.seriousError @extend .error， 那么樣式表中的任何一處.error都用.error``.seriousError這一選擇器組進(jìn)行替換。這就意味著相關(guān)樣式會如預(yù)期那樣應(yīng)用到.error和.seriousError。當(dāng).error出現(xiàn)在復(fù)雜的選擇器中，比如說h1.error``.error a或者#main .sidebar input.error[type="text"]，那情況就變得復(fù)雜多了，但是不用擔(dān)心，sass已經(jīng)為你考慮到了這些。

關(guān)于@extend有兩個(gè)要點(diǎn)你應(yīng)該知道。

• 跟混合器相比，繼承生成的css代碼相對更少。因?yàn)槔^承僅僅是重復(fù)選擇器，而不會重復(fù)屬性，所以使用繼承往往比混合器生成的css體積更小。如果你非常關(guān)心你站點(diǎn)的速度，請牢記這一點(diǎn)。
• 繼承遵從css層疊的規(guī)則。當(dāng)兩個(gè)不同的css規(guī)則應(yīng)用到同一個(gè)html元素上時(shí)，并且這兩個(gè)不同的css規(guī)則對同一屬性的修飾存在不同的值，css層疊規(guī)則會決定應(yīng)用哪個(gè)樣式。相當(dāng)直觀：通常權(quán)重更高的選擇器勝出，如果權(quán)重相同，定義在后邊的規(guī)則勝出。

混合器本身不會引起css層疊的問題，因?yàn)榛旌掀靼褬邮街苯臃诺搅?code>css規(guī)則中，而繼承存在樣式層疊的問題。被繼承的樣式會保持原有定義位置和選擇器權(quán)重不變。通常來說這并不會引起什么問題，但是知道這點(diǎn)總沒有壞處。

6-4. 使用繼承的最佳實(shí)踐;

通常使用繼承會讓你的css美觀、整潔。因?yàn)槔^承只會在生成css時(shí)復(fù)制選擇器，而不會復(fù)制大段的css屬性。但是如果你不小心，可能會讓生成的css中包含大量的選擇器復(fù)制。

避免這種情況出現(xiàn)的最好方法就是不要在css規(guī)則中使用后代選擇器（比如.foo .bar）去繼承css規(guī)則。如果你這么做，同時(shí)被繼承的css規(guī)則有通過后代選擇器修飾的樣式，生成css中的選擇器的數(shù)量很快就會失控：

.foo .bar { @extend .baz; }
.bip .baz { a: b; }

在上邊的例子中，sass必須保證應(yīng)用到.baz的樣式同時(shí)也要應(yīng)用到.foo .bar（位于class="foo"的元素內(nèi)的class="bar"的元素）。例子中有一條應(yīng)用到.bip .baz（位于class="bip"的元素內(nèi)的class="baz"的元素）的css規(guī)則。當(dāng)這條規(guī)則應(yīng)用到.foo .bar時(shí)，可能存在三種情況，如下代碼:

<!-- 繼承可能迅速變復(fù)雜 -->
<!-- Case 1 -->
<div class="foo">
  <div class="bip">
    <div class="bar">...</div>
  </div>
</div>
<!-- Case 2 -->
<div class="bip">
  <div class="foo">
    <div class="bar">...</div>
  </div>
</div>
<!-- Case 3 -->
<div class="foo bip">
  <div class="bar">...</div>
</div>

為了應(yīng)付這些情況，sass必須生成三種選擇器組合（僅僅是.bip .foo .bar不能覆蓋所有情況）。如果任何一條規(guī)則里邊的后代選擇器再長一點(diǎn)，sass需要考慮的情況就會更多。實(shí)際上sass并不總是會生成所有可能的選擇器組合，即使是這樣，選擇器的個(gè)數(shù)依然可能會變得相當(dāng)大，所以如果允許，盡可能避免這種用法。

值得一提的是，只要你想，你完全可以放心地繼承有后代選擇器修飾規(guī)則的選擇器，不管后代選擇器多長，但有一個(gè)前提就是，不要用后代選擇器去繼承。

7. 小結(jié);

本文介紹了sass最基本部分,你可以輕松地使用sass編寫清晰、無冗余、語義化的css。對于sass提供的工具你已經(jīng)有了一個(gè)比較深入的了解，同時(shí)也掌握了何時(shí)使用這些工具的指導(dǎo)原則。

變量是sass提供的最基本的工具。通過變量可以讓獨(dú)立的css值變得可重用，無論是在一條單獨(dú)的規(guī)則范圍內(nèi)還是在整個(gè)樣式表中。變量、混合器的命名甚至sass的文件名，可以互換通用_和-。同樣基礎(chǔ)的是sass的嵌套機(jī)制。嵌套允許css規(guī)則內(nèi)嵌套css規(guī)則，減少重復(fù)編寫常用的選擇器，同時(shí)讓樣式表的結(jié)構(gòu)一眼望去更加清晰。sass同時(shí)提供了特殊的父選擇器標(biāo)識符&，通過它可以構(gòu)造出更高效的嵌套。

你也已經(jīng)學(xué)到了sass的另一個(gè)重要特性，樣式導(dǎo)入。通過樣式導(dǎo)入可以把分散在多個(gè)sass文件中的內(nèi)容合并生成到一個(gè)css文件，避免了項(xiàng)目中有大量的css文件通過原生的css?@import帶來的性能問題。通過嵌套導(dǎo)入和默認(rèn)變量值，導(dǎo)入可以構(gòu)建更強(qiáng)有力的、可定制的樣式?；旌掀髟试S用戶編寫語義化樣式的同時(shí)避免視覺層面上樣式的重復(fù)。你不僅學(xué)到了如何使用混合器減少重復(fù)，同時(shí)學(xué)習(xí)到了如何使用混合器讓你的css變得更加可維護(hù)和語義化。最后，我們學(xué)習(xí)了與混合器相輔相成的選擇器繼承。繼承允許你聲明類之間語義化的關(guān)系，通過這些關(guān)系可以保持你的css的整潔和可維護(hù)性。