推薦部落格：https://blog.hypers.io/2017/08/06/sass%20&%20compass%20%E6%95%99%E7%A8%8B%20--%20%E8%AF%AD%E6%B3%95%E7%AF%87(%E4%B8%80)/?utm_source=tuicool&utm_medium=referral

1.選擇器巢狀

Sass 的巢狀分為三種：

• 選擇器巢狀
• 屬性巢狀
• 偽類巢狀

1、選擇器巢狀

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

<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;
    }
  }  
}

2.屬性巢狀

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;
  }
}

3.偽類巢狀

和屬性巢狀非常類似，只不過他需要藉助`&`符號一起配合使用。我們就拿經典的“clearfix”為例吧：

.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;
}

避免選擇器巢狀：

• 選擇器巢狀最大的問題是將使最終的程式碼難以閱讀。開發者需要花費巨大精力計算不同縮排級別下的選擇器具體的表現效果。
• 選擇器越具體則宣告語句越冗長，而且對最近選擇器的引用(&)也越頻繁。在某些時候，出現混淆選擇器路徑和探索下一級選擇器的錯誤率很高，這非常不值得。

為了防止此類情況，我們應該儘可能避免選擇器巢狀。然而，顯然只有少數情況適應這一措施。