掃二維碼與項(xiàng)目經(jīng)理溝通
我們在微信上24小時(shí)期待你的聲音
解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
混合器中不僅可以包含屬性,也可以包含css規(guī)則,包含選擇器和選擇器中的屬性,如下代碼:
@mixin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}當(dāng)一個(gè)包含css規(guī)則的混合器通過@include包含在一個(gè)父規(guī)則中時(shí),在混合器中的規(guī)則最終會(huì)生成父規(guī)則中的嵌套規(guī)則。舉個(gè)例子,看看下邊的sass代碼,這個(gè)例子中使用了no-bullets這個(gè)混合器:
ul.plain {
color: #444;
@include no-bullets;
}sass的@include指令會(huì)將引入混合器的那行代碼替換成混合器里邊的內(nèi)容。最終,上邊的例子如下代碼:
ul.plain {
color: #444;
list-style: none;
}
ul.plain li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}混合器中的規(guī)則甚至可以使用sass的父選擇器標(biāo)識(shí)符&。使用起來跟不用混合器時(shí)一樣,sass解開嵌套規(guī)則時(shí),用父規(guī)則中的選擇器替代&。
如果一個(gè)混合器只包含css規(guī)則,不包含屬性,那么這個(gè)混合器就可以在文檔的頂部調(diào)用,寫在所有的css規(guī)則之外。如果你只是為自己寫一些混合器,這并沒有什么大的用途,但是當(dāng)你使用一個(gè)類似于Compass的庫時(shí),你會(huì)發(fā)現(xiàn),這是提供樣式的好方法,原因在于你可以選擇是否使用這些樣式。
接下來你將學(xué)習(xí)如何通過給混合器傳參數(shù)來讓混合器變得更加靈活和可重用。

我們在微信上24小時(shí)期待你的聲音
解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流