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í)會(huì)幫你把這些嵌套規(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 }

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

#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ī)則會(huì)被單獨(dú)抽離出來，而嵌套元素的樣式規(guī)則會(huì)像容器元素沒有包含任何屬性時(shí)那樣被抽離出來。

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

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