Mixin 和 CSS Guards

當咱們想在表達式上進行匹配簡單的值或者是參數數量時，咱們可使用Guards；它與mixin聲明相關聯，幷包括附加到mixin的條件。每一個mixin將有一個或多個由逗號分隔的防禦，而且guard必須括在括號中。 

爲了儘可能接近CSS的聲明性，Less選擇了使用經過受保護的Guards的mixins而不是if / else語句執行，並執行計算以指定匹配的mixin。

Guard 比較運算符

Guards中可用的比較運算符的完整列表爲：>，>=，=，=<，<，此外關鍵字 true 是惟一的真實值，使這兩個mixin等價。

.compare (@a) when (@a) { ... }
    .compare (@a) when (@a = true) { ... }
    
    // 除關鍵字之外的任何值 true 都是僞造的
    .xkd{
        .compare(40);
    }
    
    // 能夠將參數相互比較或與非參數進行比較
    @media: mobile;
    .mixin (@x) when (@media = mobile) { ... }
    .mixin (@x) when (@media = desktop) { ... }
    .max (@x; @y) when (@x > @y) { width: @x }
    .max (@x; @y) when (@x < @y) { width: @y }

Guard 邏輯運算符

能夠將邏輯運算符與防禦一塊兒使用，語法基於CSS媒體查詢。

// 1:使用and關鍵字來組合保護
    .mixin (@x) when (isnumber(@x)) and (@x > 0) { ... }
    
    // 2:經過用逗號分隔保護來模擬或運算符，若是任何一個守衛評估爲true，則認爲是匹配
    .mixin (@x) when (@x > 10), (@x < -20) { ... }
    
    // 3:使用not關鍵字否認條件
    .mixin (@y) when not (@y > 0) { ... }

類型檢查函數

若是要根據值類型匹配混合，那麼咱們可使用 is 功能。

.mixin (@x; @y: 0) when (isnumber(@y)) { ... }
    .mixin (@x; @y: black) when (iscolor(@y)) { ... }

基本的類型檢查功能：

• iscolor
• isnumber
• isstring
• iskeyword
• isurl

若是要檢查值是不是數字，是否還使用特定單位，則可使用如下方法之一：

• ispixel
• ispercentage
• isem
• isunit

條件混合

（fixme）另外，默認函數可用於根據其餘混合匹配進行混合匹配，而且咱們可使用它建立相似於else或默認語句（分別是if和case結構）的條件混合。

.mixin (@x) when (@x > 0) { ...  }
    // 僅當第一個mixin不匹配時匹配，即當@x<=0時
    .mixin (@x) when (default()) { ... }

CSS Guards

保護也能夠應用於css選擇器，這是聲明mixin而後當即調用它的語法糖。

• 直接將保護應用於樣式

  button when (@mystyle = true) {
        color: white;
      }

• if 經過將其與 & feature結合使用來實現if-type語句，從而容許咱們對多個防禦進行分組。

  & when (@mystyle = true) {
        button {
          color: white;
        }
        a {
          color: green;
        }
      }