Sass 中一個正在被眾多開發者濫用的功能，就是**選擇器嵌套**。選擇器嵌套為樣式表作者提供了一個通過局部選擇器的相互嵌套實現全局選擇的方法。 ## 一般規則 比如下述Sass選擇器的嵌套： ~~~ .foo { .bar { &:hover { color: red; } } } ~~~ 生成的 CSS: ~~~ .foo .bar:hover { color: red; } ~~~ 從 Sass3.3 開始，可以在同一行中使用最近選擇器引用(`&`)來實現高級選擇器，比如： ~~~ .foo { &-bar { color: red; } } ~~~ 生成的 CSS: ~~~ .foo-bar { color: red; } ~~~ 這種方式通常被用來配合?[BEM 全名方式](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)使用，基于原選擇器（比如?`.block`）生成?`.block__element`?and?`.block--modifier`?選擇器。 傳說中，使用?`&`?能在當前選擇器下產生新的選擇器，這樣代碼庫中選擇器無法控制，因為他們本身不存在 選擇器嵌套最大的問題是將使最終的代碼難以閱讀。開發者需要花費巨大精力計算不同縮進級別下選擇器具體的表現效果。CSS 最終的表現效果往往不是淺顯易懂的。 選擇器越具體則聲明語句越冗長，而且對最近選擇器的引用(`&`)也越頻繁。在某些時候，出現混淆選擇器路徑和探索下一級選擇器的錯誤率很高，這非常不值得。 為了防止此類情況，我們**應該盡可能避免選擇器嵌套**。然而，顯然只有少數情況適應這一措施。 ## 例外 首先，在最外層選擇器中嵌套偽類和偽元素是被允許，也是受推薦的。 ~~~ .foo { color: red; &:hover { color: green; } &::before { content: 'pseudo-element'; } } ~~~ 使用選擇器嵌套選擇偽類和偽元素不僅僅有道理的（因為它的處理功能與選擇器緊密相關），而且有助于保持總體的一致性。 當然，如果使用類似?`.is-active`?類名來控制當前選擇器狀態，也可以這樣使用選擇器嵌套。 ~~~ .foo { // ... &.is-active { font-weight: bold; } } ~~~ 這并不是最重要的，當一個元素的樣式在另一個容器中有其他指定的樣式時，可以使用嵌套選擇器讓他們保持在同一個地方。 ~~~ .foo { // ... .no-opacity & { display: none; } } ~~~ 當一個沒太多經驗的開發者，不對類似于?`.no-opacity &`?這樣的選擇器造成混淆。可能創建一個?`mixin`?來處理。 ~~~ /// Helper mixin to provide simple API to selector nesting /// @param {String} $selector - Selector @mixin when-inside($selector) { #{$selector} & { @content; } } ~~~ 重寫剛才的示例，他看起來像這樣： ~~~ .foo { // ... @include when-inside('.no-opacity') { display: none; } } ~~~ 這所有的一切，有些是無關緊要的細節，關鍵是要保持一致性。如果你覺得完全有信心搞定選擇器嵌套，然后你就使用了選擇器嵌套。可你還要確保你的整個團隊也能搞定選擇器的嵌套。 ## 擴展閱讀 * [Beware of Selector Nesting](http://www.sitepoint.com/beware-selector-nesting-sass/) * [The Inception Rule](http://thesassway.com/beginner/the-inception-rule) * [Avoid nested selectors for more modular CSS](http://thesassway.com/intermediate/avoid-nested-selectors-for-more-modular-css) 如果你喜歡 Sass Guidelines，請支持它 [?支持 Sass Guidelines](https://gum.co/sass-guidelines)