完整學習視訊及資料在這裡哦~
連結：https://pan.baidu.com/s/1cXs9KKoIFP1M5oTClSr7yg
提取碼：4k8t

條件表示式

• 當需要根據表示式，而不是引數的值或數量來進行匹配時，就需要用到條件表示式了。
• Less中使用關鍵字 when 來實現條件判斷。
• 表示式中可以使用比較運算子、邏輯運算子、或檢查函式來進行條件判斷。

比較運算子

有：>, >= , < , =< , = , ture;

.mixin(@width) when (@width <= 360px) {
    width: @width;
    height: 100%;
    background-color: pink;
}
.mixin(@width) when (@width > 360px) {
    width: @width;
    height: 100%;
    background-color: black;
}
div{
    .mixin(500px);
}
// 輸出  匹配到第二個的條件 執行第二個
div {
  width: 500px;
  height: 100%;
  background-color: black;
}
 

還可以使用關鍵字true，它表示布林真，以下兩個mixin是相同的：

• .truth (@a) when (@a) { ... }
• .truth (@a) when (@a = true) { ... }

在Less中，只有 true 表示布林真，關鍵字true以外的任何值，都被視為布林假。如：

.div{
    .truth(40);   	// 不會匹配上面的任何定義
}

注意：when後的條件表示式可以是多個表示式，多個表示式之間使用逗號相隔，若其中任何一個為true，則匹配為成功，相當於“ 或 ” 的關係。

邏輯運算子

• Less中，表示式之間也可以使用and 和 not 來進行邏輯運算。
• and 連線的表示式需都為 true 才能匹配成功。
• not 表示否定的意思 相當於“ 非 ”

// 傳入的引數大於200px 且 小於 500px
.mixin(@width) when (@width > 200px) and (@width < 500px){
    width: @width;
    height: 100%;
    background-color: pink;
}
// 傳入的引數 不小於500px 且 大於0
.mixin(@width) when not(@width < 500px) and (@width > 0){
    width: @width;
    height: 100%;
    background-color: black;
}
div{
    .mixin(500px);
}
// 輸出為 匹配到第二個
div {
  width: 500px;
  height: 100%;
  background-color: black;
}
 

總結：逗號——或 ， and——與 ，not——非。

型別檢查函式

可以基於值的型別來匹配函式

是則為 true 則執行匹配的內容，用於匹配相同的型別。

.mixin(@a) when (iscolor(@a)) {
    background-color: @a;
}
.mixin(@a) when (isnumber(@a)) {
    width: @a;
    height: @a;
}
div{
    .mixin(100%);
    .mixin(pink);
}
// 輸出為 
div {
  width: 100%;
  height: 100%;
  background-color: pink;
}

單位檢查函式

同類型檢查函式，用於匹配相同的單位。

.mixin(@a) when (ispixel(@a)) {
    border: @a solid pink;
}
.mixin(@a) when (ispercentage(@a)) {
    width: @a;
    height: @a;
}
div{
    .mixin(100%);
    .mixin(1px);
}
// 輸出為
div {
  width: 100%;
  height: 100%;
  border: 1px solid pink;
}

參考部落格：https://www.cnblogs.com/waibo/p/7908522.html