less學習(九) 關於Guards

2021-08-10 18:49:43 字數 899 閱讀 3633

如果你想在表示式上匹配簡單的值或引數數量,那麼你可以使用guards。 它與mixin宣告相關聯,幷包括附加到mixin的條件。 每個mixin將有乙個或多個由逗號分隔的防護,並且guard必須括在括號中。 less使用guards的mixins而不是if / else語句,並執行計算以指定匹配的mixin。

下面列出了不同型別的mixins guard以及描述。

1、guard比較運算子:可以使用比較運算子(=)來比較數字,字串,識別符號等

2、guard邏輯運算子:可以使用『和』關鍵字處理帶有guards的邏輯運算子

3、型別檢查函式:包含內建函式來確定匹配mixin的值型別

4、less mixin guards:less使用預設函式mixin與其他mixin進行匹配

.mixin (@a) when (lightness(@a) >= 50%) 

.mixin (@a) when (lightness(@a) < 50%)

.mixin (@a)

.class1

.class2

輸出為:

.class1 

.class2

guard用於匹配表示式上的簡單值或引數個數。 它應用於css選擇器。 它是用於宣告mixin並立即呼叫它的語法。 要成功地引出 if 型別語句; 將此功能與功能&結合使用,您可以將多個guards分組。

@usedscope: global;

.mixin()

.style when (@usedscope=mixin)

@usedscope: mixin;

}.mixin();

輸出為:

.style

關於Less的學習筆記

less簡介部分記錄 1 less是一門css預處理語言,它擴充了css語言,增加了諸如變數 混合 mixin 函式等功能,讓css更易維護 方便製作主題 擴充,是一種動態樣式語言。2 編譯工具 koala。3 注釋 兩種方式 此種注釋會被編譯,即此句注釋會出現在編譯好的css檔案中。不會被編譯。4...

less學習 less的混合(mixin)

上篇 less的巢狀規則 本篇我們來講述一下什麼是混合 mixin 混合簡單的理解就是把乙個css規則嵌入到另乙個css規則中,那麼這該怎麼理解學習呢?我們先來看一下乙個簡單的混合 a,b mixin class mixin id 編譯後 a,b mixin class mixin id 從上面的例...

less學習彙總

1定義變數 text 300px 這裡定義了乙個text變數 body相當於 body 2混合 比如我在定義乙個兩個div的 div,div1 這兩個div唯一不同就是div1比div 多乙個margin 100px,那麼可以用less這樣寫 class div div class div1 div...