整理自慕課筆記
Sass 中還提供了選擇器巢狀功能，但這也並不意味著你在 Sass 中的巢狀是無節制的，因為你巢狀的層級越深，編譯出來的 CSS 程式碼的選擇器層級將越深，這往往是大家不願意看到的一點。這個特性現在正被眾多開發者濫用。
選擇器巢狀為樣式表的作者提供了一個通過區域性選擇器相互巢狀實現全域性選擇的方法，Sass 的巢狀分為三種：
1. 選擇器巢狀
2. 屬性巢狀
3. 偽類巢狀

選擇器巢狀

假設我們有一段這樣的結構：

<header>
<nav>
    <a href=“##”>Home</a>
    <a
 
 href=“##”>About</a>
    <a href=“##”>Blog</a>
</nav>
<header>

想選中 header 中的 a 標籤，在寫 CSS 會這樣寫：

nav a {
  color:red;
}

header nav a {
  color:green;
}

那麼在 Sass 中，就可以使用選擇器的巢狀來實現：

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

屬性巢狀

Sass 中還提供屬性巢狀，CSS 有一些屬性字首相同，只是字尾不一樣，比如：border-top/border-right，與這個類似的還有 margin、padding、font 等屬性。假設你的樣式中用到了：

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

在 Sass 中我們可以這樣寫：

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

偽類巢狀

其實偽類巢狀和屬性巢狀非常類似，只不過他需要藉助&

.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}

編譯出來的 CSS：

clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}

避免選擇器巢狀

選擇器巢狀最大的問題是將使最終的程式碼難以閱讀。開發者需要花費巨大精力計算不同縮排級別下的選擇器具體的表現效果。
選擇器越具體則宣告語句越冗長，而且對最近選擇器的引用(&)也越頻繁。在某些時候，出現混淆選擇器路徑和探索下一級選擇器的錯誤率很高，這非常不值得。
為了防止此類情況，我們應該儘可能避免選擇器巢狀。然而，顯然只有少數情況適應這一措施。