LESS - 混合守衛

描述

如果你想匹配表示式上的簡單值或引數數量，那麼你可以使用守衛。它與混合宣告相關聯，幷包含附加到混合的條件。每個混合都將有一個或多個由逗號分隔的守衛；守衛必須用括號括起來。LESS 使用受保護的混合而不是if/else語句，並執行計算以指定匹配的混合。

下表描述了不同型別的混合守衛及其描述。

序號	型別和描述
1	守衛比較運算子您可以使用比較運算子(=) 來比較數字、字串、識別符號等。
2	守衛邏輯運算子您可以使用and關鍵字來處理守衛的邏輯運算子。
3	型別檢查函式它包含內建函式來確定匹配混合的值型別。
4	條件混合 LESS 使用default函式將混合與其他混合匹配。

示例

以下示例演示了在 LESS 檔案中使用混合守衛：

<!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>

現在，建立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

執行上述命令；它將自動建立style.css檔案，其中包含以下程式碼：

style.css

.class1 {
   font-size: 14px;
   color: #FF0000;
}

.class2 {
   font-size: 16px;
   color: #555;
}

輸出

請按照以下步驟瞭解上述程式碼的工作原理：

將上述 html 程式碼儲存在mixin-guard.html檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示以下輸出。

列印頁面