SCSS 巢狀規則

在編寫css程式碼的時候，可能由於巢狀的原因，需要多次重複書寫選擇器。

程式碼如下:

[CSS] 純文字檢視 複製程式碼
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

上面的程式碼要多次重複#content和article選擇器，非常繁瑣，使用scss即可解決此問題。

程式碼如下:

[Scss] 純文字檢視 複製程式碼
#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 (E F)包含選擇符一章節。

群組選擇器的巢狀:

關於群組選擇器可以參閱CSS 選擇器分組一章節。

先來看一段簡單的群組選擇器使用程式碼例項:

[CSS] 純文字檢視 複製程式碼
.button, button {
  margin: 0;
}

上面的是一個最為簡單的群組選擇器的應用，到此還看不到群組選擇器會給我帶來的麻煩。

再來看一段程式碼例項:

[CSS] 純文字檢視 複製程式碼
.container h1, .container h2, .container h3 { margin-bottom: .8em }

上面的群組選擇器中，我們需要不斷的重複書寫.container選擇器。

使用scss就可以避免此問題，程式碼如下:

[Scss] 純文字檢視 複製程式碼
.container {
  h1, h2, h3 {margin-bottom: .8em}
}

上面是父選擇器出現重複，子選擇器如果出現重複也同樣可以使用scss簡化:

[CSS] 純文字檢視 複製程式碼
nav a, aside a {color: blue}

上面的css程式碼可以使用scss編寫如下:

[Scss] 純文字檢視 複製程式碼
nav, aside {
  a {color: blue}
}

子組合選擇器和同層組合選擇器:

（1）.>選擇器可以參閱CSS (E>F)子選擇符一章節。

（2）.+選擇器可以參閱CSS (E+F)相鄰選擇符一章節。

（3）.~選擇器可以參閱CSS (E~F)兄弟選擇符一章節。

css程式碼如下:

[CSS] 純文字檢視 複製程式碼
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 }

對應的scss程式碼如下:

[Scss] 純文字檢視 複製程式碼
article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

特別說明:~、和+選擇器既可以放在大括號的外部，也可以放在大括號的內部。

&的用法可以參閱scss &識別符號一章節。