混合類似于編程語(yǔ)言中的函數(shù)。 Mixins是一組CSS屬性，允許您將一個(gè)類的屬性用于另一個(gè)類，并且包含類名作為其屬性。 在LESS中，可以使用類或id選擇器以與CSS樣式相同的方式聲明mixin。 它可以存儲(chǔ)多個(gè)值，并且可以在必要時(shí)在代碼中重復(fù)使用。

創(chuàng)新互聯(lián)一直通過(guò)網(wǎng)站建設(shè)和網(wǎng)站營(yíng)銷幫助企業(yè)獲得更多客戶資源。 以"深度挖掘，量身打造，注重實(shí)效"的一站式服務(wù)，以成都網(wǎng)站建設(shè)、做網(wǎng)站、移動(dòng)互聯(lián)產(chǎn)品、全網(wǎng)營(yíng)銷推廣服務(wù)為核心業(yè)務(wù)。10余年網(wǎng)站制作的經(jīng)驗(yàn)，使用新網(wǎng)站建設(shè)技術(shù)，全新開(kāi)發(fā)出的標(biāo)準(zhǔn)網(wǎng)站，不但價(jià)格便宜而且實(shí)用、靈活，特別適合中小公司網(wǎng)站制作。網(wǎng)站管理系統(tǒng)簡(jiǎn)單易用，維護(hù)方便，您可以完全操作網(wǎng)站資料，是中小公司快速網(wǎng)站建設(shè)的選擇。

下表詳細(xì)說(shuō)明了LESS mixin的使用。

S.N.	混合使用及描述
1	不輸出mixin 混合可以通過(guò)簡(jiǎn)單地將括號(hào)放在輸出中消失。
2	Mixins中的選擇器 mixin不僅可以包含屬性，還可以包含選擇器。
3	命名空間 命名空間用于在通用名稱下對(duì)mixin進(jìn)行分組。
4	保護(hù)的命名空間 當(dāng)保護(hù)應(yīng)用于命名空間時(shí)，它定義的mixins只有在保護(hù)條件返回真時(shí)才使用。
5	！important關(guān)鍵字 ！important 關(guān)鍵字用于覆蓋特定屬性。

例子

以下示例演示如何在LESS文件中使用 mixins :

  
  


Welcome to Tutorialspoint
LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.
LESS is a dynamic style sheet language that extends the capability of CSS. 
LESS is cross browser friendly.

接下來(lái)，創(chuàng)建文件 style.less 。

style.less

.p1{
  color:red;
}
.p2{
  background : #64d9c0;
  .p1();
}
.p3{
   background : #DAA520;
  .p1;
}

您可以使用以下命令將 style.less 編譯為 style.css :

lessc style.less style.css

接下來(lái)執(zhí)行上面的命令，它將用下面的代碼自動(dòng)創(chuàng)建 style.css 文件:

style.css

.p1 {
  color: red;
}
.p2 {
  background: #64d9c0;
  color: red;
}
.p3 {
  background: #DAA520;
  color: red;
}

輸出

讓我們執(zhí)行以下步驟，看看上面的代碼如何工作:

• 將以上html代碼保存在 less_mixins.html 文件中。

• 在瀏覽器中打開(kāi)此HTML文件，將顯示如下輸出。

調(diào)用mixins時(shí)，括號(hào)是可選的。 在上面的例子中，語(yǔ)句 .p1(); 和 .p1; 都做同樣的事情。

---

分享題目：創(chuàng)新互聯(lián)less教程：Less混合
文章轉(zhuǎn)載：http://www.5511xx.com/article/cospjgo.html