2-4. 嵌套屬性
在sass
中,除了CSS選擇器,屬性也可以進行嵌套。盡管編寫屬性涉及的重復不像編寫選擇器那么糟糕,但是要反復寫border-style
border-width
border-color
以及border-*
等也是非常煩人的。在sass
中,你只需敲寫一遍border
:
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
嵌套屬性的規則是這樣的:把屬性名從中劃線-的地方斷開,在根屬性后邊添加一個冒號:,緊跟一個{ }
塊,把子屬性部分寫在這個{ }
塊中。就像css
選擇器嵌套一樣,sass
會把你的子屬性一一解開,把根屬性和子屬性部分通過中劃線-連接起來,最后生成的效果與你手動一遍遍寫的css
樣式一樣:
nav {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
對于屬性的縮寫形式,你甚至可以像下邊這樣來嵌套,指明例外規則:
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
這比下邊這種同等樣式的寫法要好:
nav {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}
屬性和選擇器嵌套是非常偉大的特性,因為它們不僅大大減少了你的編寫量,而且通過視覺上的縮進使你編寫的樣式結構更加清晰,更易于閱讀和開發。
即便如此,隨著你的樣式表變得越來越大,這種寫法也很難保持結構清晰。有時,處理這種大量樣式的唯一方法就是把它們分拆到多個文件中。sass
通過對css
原有@import
規則的改進直接支持了這一特性。