Less的條件表達式

Less的條件表達式

當須要根據表達式，而不是參數的值或數量進行匹配時，條件表達式（Guards）就顯得很是有用。若是你熟悉函數式編程的話，對條件表達式也不會陌生。

爲了儘量地接近CSS的語言結構，Less使用關鍵字 when 而不是 if/else來實現條件判斷，由於 when 已經在CSS的 @media query 特性中被定義。

表達式中能夠使用比較運算符、邏輯運算符、或檢查函數來進行條件判斷。

一、比較運算符

Less包含五個比較運算符：<、>、<=、>=、=，能夠使用比較運算符（=）來比較數字，字符串、標識符等，而其他的運算符只能與數字一塊兒使用。如，如下Less代碼：

1. .mixin (@a) when (@a = 20px){
2.     color:red;
3. }
4. .mixin (@a) when (@a < 20px){
5.     color:blue;
6. }
7. .mixin (@a) {
8.     font-size: @a;
9. }
10. h2 {
11.     .mixin(20px)
12. }

編譯後的CSS代碼爲：

1. h2 {
2.   color: red;
3.   font-size: 20px;
4. }

此外，還能夠使用關鍵字true，它表示布爾真，如下兩個mixin是相同的：

1. .truth (@a) when (@a) { ... }
2. .truth (@a) when (@a = true) { ... }

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

1. .class {
2.   .truth(40);  // 不會匹配以上任何定義
3. }

Less中，Guards能夠是多個表達式，多個表達式之間，使用逗號‘,’分隔。若是其中任意一個表達式的結果爲 true，則匹配成功，這就至關於「或」的關係。如：

1. .mixin (@a) when (@a < -10), (@a > 10) {
2.     width: 100px;
3. }

上述Guards就表示： [-10,10] 之間的值將匹配失敗，其他均匹配成功。好比如下調用，.class1 和 .class3 會匹配成功，.class2 將匹配失敗：

1. .class1 {
2.    .mixin(-20);
3. }
4. .class2 {
5.    .mixin(0);
6. }
7. .class3 {
8.    .mixin(20);
9. }

編譯後的CSS代碼爲：

1. .class1 {
2.   width: 100px;
3. }
4. .class3 {
5.   width: 100px;
6. }

二、邏輯運算符

Less中，Guards也能夠使用 and 和 not 來進行邏輯運算。如，如下Less代碼：

1. .mixin (@a) when (@a > 50%) and (@a > 5px){
2.     font-size: 14px;
3. }
4. .mixin (@a) when not (@a < 50%) and not (@a < 5px){
5.     font-size: 20px;
6. }
7. .mixin (@a) {
8.     color: @a;
9. }
10. .class1 {
11.     .mixin(#FF0000)
12.  }
13. .class2 {
14.     .mixin(#555)
15. }

編譯後的CSS代碼爲：

1. .class1 {
2.   color: #ff0000;
3. }
4. .class2 {
5.   color: #555555;
6. }

三、檢查函數

若是想基於值的類型、或特定的單位進行匹配，就能夠使用 is* 函數。如：

1. .mixin (@a, @b: 0) when (isnumber(@a)) { ... }
2. .mixin (@a, @b: black) when (iscolor(@b) and (@a > 0)) { ... }

如下是常見的類型檢查函數：

• Iscolor：是否爲顏色值。
• Isnumber：是否爲數值。
• Isstring：是否爲字符串。
• Iskeyword：是否爲關鍵字。
• Isurl：是否爲URL字符串。
• 如下是常見的單位檢查函數：
• Ispixel：是否爲像素單位。
• ispercentage：是否爲百分比。
• isem：是否爲em單位。
• isunit：是否爲單位。