混合書(shū)寫(xiě)(Mixins)

Mixins：Mixins是預(yù)處器中的函數(shù)。平時(shí)你在寫(xiě)樣式時(shí)某段CSS樣式要經(jīng)常重復(fù)性的用到多個(gè)元素中，這樣你就需要重復(fù)的寫(xiě)多次。在CSS預(yù)處器中，你可以為這些公用的CSS樣式定義一個(gè)Mixin，然后在你CSS需要使用這些樣式的地方直接調(diào)用你定義好的Mixin。這是一個(gè)非常有用的特性。Mixins是一個(gè)公認(rèn)的選擇器，還可以在Mixins中定義變量或者是默認(rèn)參數(shù)

可以不使用任何符號(hào)，就是直接定義Mixins名，然后在定義參數(shù)和默認(rèn)值之間用等號(hào)（=）來(lái)連接

轉(zhuǎn)譯后：

混入：

混入和函數(shù)定義方法一致，但是應(yīng)用卻大相徑庭

例如下面有定義的border-radius(n)方法，其卻作為一個(gè)mixin（如，作為狀態(tài)調(diào)用，而非表達(dá)式）調(diào)用

當(dāng)border-radius()選擇器中調(diào)用時(shí)候，屬性會(huì)被擴(kuò)展并復(fù)制在選擇器中

編譯成

使用混入書(shū)寫(xiě)，你可以完全忽略括號(hào)，提供夢(mèng)幻般私有屬性的支持

注意這里我們?cè)诨旌蠒?shū)寫(xiě)中的border-radius當(dāng)作了屬性用來(lái)給標(biāo)簽添加CSS樣式，而并不是作為一個(gè)遞歸函數(shù)在調(diào)用

更進(jìn)一步，我們可以利用arguments這個(gè)局部變量，傳遞可以包含多值的表達(dá)式

現(xiàn)在，我們可以像這樣子傳值：border-radius 1px 2px / 3px 4px!

另外一個(gè)很贊的應(yīng)用是特定的私有前綴支持——例如IE瀏覽器的透明度

渲染為

父級(jí)引用:

混合書(shū)寫(xiě)可以利用父級(jí)引用字符&, 繼承父業(yè)而不是自己筑巢

例如，我們要用stripe(even, odd)創(chuàng)建一個(gè)條紋表格。even和odd均提供了默認(rèn)顏色值，每行也指定了background-color屬性。我們可以在tr嵌套中使用&來(lái)引用tr，以提供even顏色

然后，利用混合書(shū)寫(xiě)，如下

另外，stripe()的定義無(wú)需父引用

混合書(shū)寫(xiě)中的混合書(shū)寫(xiě)：

自然，混合書(shū)寫(xiě)也可以再利用其它的混合書(shū)寫(xiě)進(jìn)行組合，建立在它們自己的屬性和選擇器上

例如，下面我們創(chuàng)建內(nèi)聯(lián)comma-list()（通過(guò)inline-list()）以及逗號(hào)分隔的無(wú)序列表

渲染

總結(jié)

以上是生活随笔為你收集整理的stylus之混合书写(Mixins)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。