Web前端培訓(xùn)：Sass嵌套的使用方式

　　盡管Sass可以把反復(fù)使用的CSS屬性值定義成變量，但是為了完善Sass的功能，Sass基于變量提供了更為強(qiáng)大的工具，即規(guī)則嵌套。只有當(dāng)Sass變量與規(guī)則嵌套一起使用時(shí)，才能發(fā)揮其更大的作用。下面講解規(guī)則嵌套的使用方法。

　　在使用CSS編寫代碼的時(shí)候，眾所周知，重復(fù)寫選擇器是非常煩瑣的。例如，要寫一大串指向頁面中同一塊的樣式時(shí)，往往需要一遍又一遍地寫同一個(gè)ID來實(shí)現(xiàn)，如下所示。

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

　　為了解決重復(fù)書寫ID選擇器的問題，Sass提供了嵌套規(guī)則，只寫一遍即可實(shí)現(xiàn)，具體代碼如下。

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

　　在上述代碼中，Sass在編譯輸出CSS時(shí)會(huì)自動(dòng)把這些嵌套規(guī)則處理好，避免代碼的重復(fù)書寫，且使樣式的可讀性更高。編譯后的代碼如下。

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