本節我們學習 Sass 中的嵌套，嵌套大家應該不陌生，在 HTML 中就支持標籤的嵌套。Sass 中允許一個 CSS 樣式嵌套進另一個樣式中，內層樣式僅適用於外層樣式的選擇器範圍內。
示例：
例如下面這段 CSS 代碼：
.big {
color: #ccc;
}
.big .small {
font-size: 14px;
}
如果我們要使用 Sass 中的嵌套語法來寫，如下所示：
從上圖我們可以看到，嵌套的語法其實很簡單，相較於 CSS 語言中後代選擇器的寫法，嵌套規則看起來要直觀很多。
使用 Sass 嵌套來寫代碼，可以減少父類選擇器的重複，不過需要注意的是，我們最好不要嵌套太多層選擇器，因爲嵌套層數越多性能越低。一般我們在實際應用中，嵌套三層左右就差不多啦。
引用父選擇器 &
在嵌套 CSS 規則時，有時候我們需要直接使用到嵌套外層的父選擇器，比如當給某一個元素設定 hover 樣式時或者是當 body 元素有個 classname 時，可以用 & 符號來表示嵌套規則外層的父選擇器。
示例：
例如下面這段代碼：
a {
color: #ccc;
font-size: 12px;
}
a:hover {
color: #000;
}
我們可以這樣寫： 
上圖中 & 符號被解析爲選擇器 a，即父選擇器。一般 & 符號是出現在選擇器的前面位置，例如上述代碼中的 &:hover。
除此之外，我們也可以在 & 符號後面添加一些後綴，表示在父選擇器名稱的基礎上組合成新的選擇器名稱。
示例：
例如下面這段代碼中，選擇器名稱的前綴都一樣：
.top {
background-color: #ccc;
}
.top-div {
font-size: 14px;
}
.top-p {
color: #000;
}
.top-p__span {
font-size: 12px;
}
那我們就可以將這些前綴都使用 & 代替： 
嵌套屬性
許多 CSS 屬性具有相同的前綴 ，例如 font-family 和 font-size、font-weight、font-style 等，這些屬性遵循相同的命名空間，即 font 。爲了便於管理這樣的屬性，同時也爲了避免重複輸入，Sass 允許將屬性嵌套在命名空間中。要實現屬性的嵌套，只需要在命名空間後面加上一個冒號 : 即可。
示例：
我們來看一個例子：
.top {
font-size: 14px;
font-weight: bold;
font-style: normal;
}
例如上面這段代碼中，如果我們使用 Sass 來寫，只需要在 .top 選擇器中，在 font 命名空間後面加上一個 : 冒號，然後將其他屬性使用花括號括起來，裏面的屬性就可以不用寫 font- 前綴部分了。如下圖：
佔位符選擇器 %foo
Sass 額外提供了一種特殊類型的選擇器，叫做佔位符選擇器 (placeholder selector)，它與常用的 id 與 class 選擇器寫法相似，只是將 # 或 . 替換成了百分號 % ，然後通過 @extend 來使用。 如果不使用 @extend 指令，則無法在 CSS 中顯示結果。
示例：
%xkd{
color: #000;
}
.box{
@extend %xkd;
font-size:14px;
}
編譯成 CSS 代碼：
.box {
color: #000;
}
.box {
font-size: 14px;
}
上述代碼中，@extend 指令允許一個選擇器繼承另一個選擇器中的樣式。