編程教程Less 混合
混合類(lèi)似于編程語(yǔ)言中的函數(shù)。 Mixins是一組CSS屬性，允許您將一個(gè)類(lèi)的屬性用于另一個(gè)類(lèi)，并且包含類(lèi)名作為其屬性。 在LESS中，可以使用類(lèi)或id選擇器以與CSS樣式相同的方式聲明mixin。 它可以存儲(chǔ)多個(gè)值，并且可以在必要時(shí)在代碼中重復(fù)使用。
下表詳細(xì)說(shuō)明了LESS mixin的使用。
| S.N. | 混合使用及描述 |
|---|---|
| 1 | 不輸出mixin 混合可以通過(guò)簡(jiǎn)單地將括號(hào)放在輸出中消失。 |
| 2 | Mixins中的選擇器 mixin不僅可以包含屬性，還可以包含選擇器。 |
| 3 | 命名空間 命名空間用于在通用名稱(chēng)下對(duì)mixin進(jìn)行分組。 |
| 4 | 保護(hù)的命名空間 當(dāng)保護(hù)應(yīng)用于命名空間時(shí)，它定義的mixins只有在保護(hù)條件返回真時(shí)才使用。 |
| 5 | ！important關(guān)鍵字 ！important關(guān)鍵字用于覆蓋特定屬性。 |
例子
以下示例演示如何在LESS文件中使用mixins:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>LESS Mixins</title>
</head>
<body>
<h1>Welcome to Tutorialspoint</h1>
<p class="p1">LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.</p>
<p class="p2">LESS is a dynamic style sheet language that extends the capability of CSS. </p>
<p class="p3">LESS is cross browser friendly.</p>
</body>
</html>接下來(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;都做同樣的事情。