Less Mixin Guards

2019-05-13 15:07 更新

描述

如果你想在表達(dá)式上匹配簡單的值或參數(shù)數(shù)量，那么你可以使用Guards。 它與mixin聲明相關(guān)聯(lián)，并包括附加到mixin的條件。 每個(gè)mixin將有一個(gè)或多個(gè)由逗號分隔的防護(hù)，并且guard必須括在括號中。 LESS使用Guards的mixins而不是if / else語句，并執(zhí)行計(jì)算以指定匹配的mixin。


下表描述了不同類型的mixins guard以及描述。

S.N. 類型及描述
1 Guard比較運(yùn)算符

您可以使用比較運(yùn)算符(=)來比較數(shù)字，字符串，標(biāo)識符等。
2 Guard邏輯運(yùn)算符

您可以使用和關(guān)鍵字處理帶有Guards的邏輯運(yùn)算符。
3 類型檢查函數(shù)

它包含內(nèi)置函數(shù)來確定匹配mixins的值類型。
4 LESS Mixin Guards


LESS使用默認(rèn)函數(shù)將mixin與其他mixing進(jìn)行匹配。

例子

下面的例子演示了在LESS文件中使用mixin guard: 

<!doctype html>
<head>
   <title>Mixin Guards</title>
   <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
   <h2>Example of Mixin Guards</h2>
   <p class="class1">Hello World...</p>
   <p class="class2">Welcome to Tutorialspoint...</p>
</body>
</html>

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

style.less

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}
.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}
.mixin (@a) {
   color: @a;
}
.class1 {
   .mixin(#FF0000)
}
.class2 {
   .mixin(#555)
}
您可以使用以下命令將 style.less 編譯為 style.css : 
lessc style.less style.css
接下來執(zhí)行上面的命令，它將用下面的代碼自動(dòng)創(chuàng)建 style.css 文件:

style.css 
.class1 {
  font-size: 14px;
  color: #FF0000;
}
.class2 {
  font-size: 16px;
  color: #555;
}

輸出

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

  • 將上面的html代碼保存在 mixin-guard.html 文件中。

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


輸出
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號