5-2. 混合器中的CSS規則
混合器中不僅可以包含屬性,也可以包含css
規則,包含選擇器和選擇器中的屬性,如下代碼:
@mixin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
當一個包含css
規則的混合器通過@include
包含在一個父規則中時,在混合器中的規則最終會生成父規則中的嵌套規則。舉個例子,看看下邊的sass
代碼,這個例子中使用了no-bullets
這個混合器:
ul.plain {
color: #444;
@include no-bullets;
}
sass
的@include
指令會將引入混合器的那行代碼替換成混合器里邊的內容。最終,上邊的例子如下代碼:
ul.plain {
color: #444;
list-style: none;
}
ul.plain li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
混合器中的規則甚至可以使用sass
的父選擇器標識符&
。使用起來跟不用混合器時一樣,sass
解開嵌套規則時,用父規則中的選擇器替代&
。
如果一個混合器只包含css
規則,不包含屬性,那么這個混合器就可以在文檔的頂部調用,寫在所有的css
規則之外。如果你只是為自己寫一些混合器,這并沒有什么大的用途,但是當你使用一個類似于Compass
的庫時,你會發現,這是提供樣式的好方法,原因在于你可以選擇是否使用這些樣式。
接下來你將學習如何通過給混合器傳參數來讓混合器變得更加靈活和可重用。