建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)SASS教程:2-4.嵌套屬性
在sass中，除了CSS選擇器，屬性也可以進(jìn)行嵌套。盡管編寫屬性涉及的重復(fù)不像編寫選擇器那么糟糕，但是要反復(fù)寫border-styleborder-widthborder-color以及border-*等也是非常煩人的。在sass中，你只需敲寫一遍border:
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}嵌套屬性的規(guī)則是這樣的:把屬性名從中劃線-的地方斷開，在根屬性后邊添加一個(gè)冒號(hào):，緊跟一個(gè){ }塊，把子屬性部分寫在這個(gè){ }塊中。就像css選擇器嵌套一樣，sass會(huì)把你的子屬性一一解開，把根屬性和子屬性部分通過中劃線-連接起來，最后生成的效果與你手動(dòng)一遍遍寫的css樣式一樣:
nav {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}對(duì)于屬性的縮寫形式，你甚至可以像下邊這樣來嵌套，指明例外規(guī)則:
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}這比下邊這種同等樣式的寫法要好:
nav {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}屬性和選擇器嵌套是非常偉大的特性，因?yàn)樗鼈儾粌H大大減少了你的編寫量，而且通過視覺上的縮進(jìn)使你編寫的樣式結(jié)構(gòu)更加清晰，更易于閱讀和開發(fā)。
即便如此，隨著你的樣式表變得越來越大，這種寫法也很難保持結(jié)構(gòu)清晰。有時(shí)，處理這種大量樣式的唯一方法就是把它們分拆到多個(gè)文件中。sass通過對(duì)css原有@import規(guī)則的改進(jìn)直接支持了這一特性。
網(wǎng)站名稱：創(chuàng)新互聯(lián)SASS教程:2-4.嵌套屬性
URL標(biāo)題：http://www.5511xx.com/article/coegpdd.html
