css中重復寫選擇器是非常惱人的。如果要寫一大串指向頁面中同一塊的樣式時，往往需要一遍又一遍地寫同一個ID:

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

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

#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時把它轉換成跟你之前看到的一樣的效果。這個過程中，sass用了兩步，每一步都是像打開俄羅斯套娃那樣把里邊的嵌套規則塊一個個打開。首先，把#content(父級)這個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里邊還有嵌套的規則，sass重復一遍上邊的步驟，把新的選擇器添加到內嵌的選擇器前邊。

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

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

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

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

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