大家一起學習less 1:混合

文章目錄

• 引導

我們先看以下一段例子：

// LESS.rounded-corners (@radius: 5px) {  border-radius: @radius;  -webkit-border-radius: @radius;  -moz-border-radius: @radius;}#header {  .rounded-corners;}#footer {  .rounded-corners(10px);}/* 產生的 CSS */#header {  border-radius: 5px;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;}#footer {  border-radius: 10px;  -webkit-border-radius: 10px;  -moz-border-radius: 10px;}

最上方，其實相當於定義了一個名為“.rounded-corners ”的函數，它有一個參數叫@radius，預設值為5px。然後對於接著下來的樣式規則，它先判定其是否符合CSS文法不，符合直接輸出跳過，不符合就當成函數。

有了變數與函數，css就可以實現更大規模的重用了！

有些情況下，我們想根據傳入的參數來改變混合的預設呈現，比如下面這個例子：

.mixin (@s, @color) { ... }.class {  .mixin(@switch, #888);}

如果想讓.mixin根據不同的@switch值而表現各異，如下這般設定：

.mixin (dark, @color) {  color: darken(@color, 10%);}.mixin (light, @color) {  color: lighten(@color, 10%);}.mixin (@_, @color) {  display: block;}

現在，如果運行:

@switch: light;.class {  .mixin(@switch, #888);}

就會得到下列CSS:

.class {  color: #a2a2a2;  display: block;}

如上，.mixin就會得到傳入顏色的淺色。如果@switch設為dark，就會得到深色。

具體實現如下：

• 第一個混合定義並未被匹配，因為它只接受dark做為首參
• 第二個混合定義被成功匹配，因為它只接受light
• 第三個混合定義被成功匹配，因為它接受任意值

只有被匹配的混合才會被使用。變數可以匹配任意的傳入值，而變數以外的固定值就僅僅匹配與其相等的傳入值。

我們也可以匹配多個參數：

.mixin (@a) {  color: @a;}.mixin (@a, @b) {  color: fade(@a, @b);}

引導

當我們想根據運算式進行匹配，而非根據值和參數匹配時，導引就顯得非常有用。如果你對函數式編程非常熟悉，那麼你很可能已經使用過導引。

為了儘可能地保留CSS的可聲明性，LESS通過導引混合而非if/else語句來實現條件判斷，因為前者已在@media query特性中被定義。

以此例做為開始：

.mixin (@a) when (lightness(@a) >= 50%) {  background-color: black;}.mixin (@a) when (lightness(@a) 
when關鍵字用以定義一個導引序列(此例只有一個導引)。接下來我們運行下列代碼：
.class1 { .mixin(#ddd) }.class2 { .mixin(#555) }
就會得到：
.class1 {  background-color: black;  color: #ddd;}.class2 {  background-color: white;  color: #555;}
導引中可用的全部比較運算有： > >= = =
.truth (@a) when (@a) { ... }.truth (@a) when (@a = true) { ... }
除去關鍵字true以外的值都被視示布爾假：
.class {  .truth(40); // Will not match any of the above definitions.}
導引序列使用逗號‘,’—分割，若且唯若所有條件都符合時，才會被視為匹配成功。
.mixin (@a) when (@a > 10), (@a 
導引可以無參數，也可以對參數進行比較運算：
@media: mobile;.mixin (@a) when (@media = mobile) { ... }.mixin (@a) when (@media = desktop) { ... }.max (@a, @b) when (@a > @b) { width: @a }.max (@a, @b) when (@a 
最後，如果想基於值的類型進行匹配，我們就可以使用is*函式：
.mixin (@a, @b: 0) when (isnumber(@b)) { ... }.mixin (@a, @b: black) when (iscolor(@b)) { ... }
下面就是常見的檢測函式：
   

    
iscolor
    
isnumber
    
isstring
    
iskeyword
    
isurl
   
如果你想判斷一個值是純數字，還是某個單位量，可以使用下列函式：
   

    
ispixel
    
ispercentage
    
isem
   
最後再補充一點，在導引序列中可以使用and關鍵字實現與條件：
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
使用not關鍵字實現或條件
.mixin (@b) when not (@b > 0) { ... }