有声小说下载,雪鹰领主

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

創(chuàng)新互聯(lián)SASS教程:2-2.群組選擇器的嵌套

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

.button, button {
  margin: 0;
}

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

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

非常幸運，sass的嵌套特性在這種場景下也非常有用。當(dāng)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在減少重復(fù)敲寫方面的貢獻之一。尤其在當(dāng)嵌套級別達到兩層甚至三層以上時，與普通的css編寫方式相比，只寫一遍群組選擇器大大減少了工作量。

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

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

文章標題：創(chuàng)新互聯(lián)SASS教程:2-2.群組選擇器的嵌套
本文URL：http://m.fisionsoft.com.cn/article/dhoigsi.html