在CSS里邊，選擇器h1,h2,h3會同時命中h1元素、h2元素和h3元素。與此類似，.button,button會命中button元素和類名為.button的元素。這種選擇器稱為群組選擇器。群組選擇器的規(guī)則會對命中群組中任何一個選擇器的元素生效。

.button, button {
  margin: 0;
}

當看到上邊這段代碼時，你可能還沒意識到會有重復性的工作。但會很快發(fā)現(xiàn)——如果你需要在一個特定的容器元素內(nèi)對這樣一個群組選擇器進行修飾，情況就不同了。css的寫法會讓你在群組選擇器中的每一個選擇器前都重復一遍容器元素的選擇器。

.container h1, .container h2, .container h3 { margin-bottom: .8em }

非常幸運，sass的嵌套特性在這種場景下也非常有用。當sass解開一個群組選擇器規(guī)則內(nèi)嵌的規(guī)則時，它會把每一個內(nèi)嵌選擇器的規(guī)則都正確地解出來:

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

首先sass將.container和h1.container和h2.container和h3分別組合，然后將三者重新組合成一個群組選擇器，生成你前邊看到的普通css樣式。對于內(nèi)嵌在群組選擇器內(nèi)的嵌套規(guī)則，處理方式也一樣:

nav, aside {
  a {color: blue}
}

首先sass將nav和aaside和a分別組合，然后將二者重新組合成一個群組選擇器:

nav a, aside a {color: blue}

處理這種群組選擇器規(guī)則嵌套上的強大能力，正是sass在減少重復敲寫方面的貢獻之一。尤其在當嵌套級別達到兩層甚至三層以上時，與普通的css編寫方式相比，只寫一遍群組選擇器大大減少了工作量。

有利必有弊，你需要特別注意群組選擇器的規(guī)則嵌套生成的css。雖然sass讓你的樣式表看上去很小，但實際生成的css卻可能非常大，這會降低網(wǎng)站的速度。

關(guān)于選擇器嵌套的最后一個方面，我們看看sass如何處理組合選擇器，比如>、+和~的使用。你將看到，這種場景下你甚至無需使用父選擇器標識符。