Sass 中還提供了選擇器巢狀功能，但這也並不意味著你在 Sass 中的巢狀是無節制的，因為你巢狀的層級越深，編譯出來的 CSS 程式碼的選擇器層級將越深，這往往是大家不願意看到的一點。

　　選擇器巢狀為樣式表的作者提供了一個通過區域性選擇器相互巢狀實現全域性選擇的方法，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、屬性巢狀
　　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;
  }
}

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