Sass 中還提供了選擇器嵌套功能，但這也并不意味著你在 Sass 中的嵌套是無(wú)節(jié)制的，因?yàn)槟闱短椎膶蛹?jí)越深，編譯出來(lái)的 CSS 代碼的選擇器層級(jí)將越深，這往往是大家不愿意看到的一點(diǎn)。這個(gè)特性現(xiàn)在正被眾多開發(fā)者濫用。

選擇器嵌套為樣式表的作者提供了一個(gè)通過(guò)局部選擇器相互嵌套實(shí)現(xiàn)全局選擇的方法，Sass 的嵌套分為三種：

• 選擇器嵌套
• 屬性嵌套
• 偽類嵌套

1、選擇器嵌套

假設(shè)我們有一段這樣的結(jié)構(gòu)：

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

想選中 header 中的 a 標(biāo)簽，在寫 CSS 會(huì)這樣寫：

nav a {
  color:red;
}

header nav a {
  color:green;
}

那么在 Sass 中，就可以使用選擇器的嵌套來(lái)實(shí)現(xiàn)：

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}