建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)SASS教程:2.嵌套CSS規(guī)則
css中重復(fù)寫選擇器是非常惱人的。如果要寫一大串指向頁面中同一塊的樣式時，往往需要一遍又一遍地寫同一個ID:
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }像這種情況，sass可以讓你只寫一遍，且使樣式可讀性更高。在Sass中，你可以像俄羅斯套娃那樣在規(guī)則塊中嵌套規(guī)則塊。sass在輸出css時會幫你把這些嵌套規(guī)則處理好，避免你的重復(fù)書寫。
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
/* 編譯后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }上邊的例子，會在輸出css時把它轉(zhuǎn)換成跟你之前看到的一樣的效果。這個過程中，sass用了兩步，每一步都是像打開俄羅斯套娃那樣把里邊的嵌套規(guī)則塊一個個打開。首先，把#content(父級)這個id放到article選擇器(子級)和aside選擇器(子級)的前邊:
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
#content aside { background-color: #EEE }
}
/* 編譯后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }然后，#content article里邊還有嵌套的規(guī)則，sass重復(fù)一遍上邊的步驟，把新的選擇器添加到內(nèi)嵌的選擇器前邊。
一個給定的規(guī)則塊，既可以像普通的CSS那樣包含屬性，又可以嵌套其他規(guī)則塊。當你同時要為一個容器元素及其子元素編寫特定樣式時，這種能力就非常有用了。
#content {
background-color: #f5f5f5;
aside { background-color: #eee }
}容器元素的樣式規(guī)則會被單獨抽離出來，而嵌套元素的樣式規(guī)則會像容器元素沒有包含任何屬性時那樣被抽離出來。
#content { background-color: #f5f5f5 }
#content aside { background-color: #eee }大多數(shù)情況下這種簡單的嵌套都沒問題，但是有些場景下不行，比如你想要在嵌套的選擇器里邊立刻應(yīng)用一個類似于:hover的偽類。為了解決這種以及其他情況，sass提供了一個特殊結(jié)構(gòu)&。
網(wǎng)頁標題：創(chuàng)新互聯(lián)SASS教程:2.嵌套CSS規(guī)則
本文URL：http://m.fisionsoft.com.cn/article/djpehhj.html
