less學習 模式匹配和導引表示式（帶引數混合2）

2021-08-23 12:00:04 字數 2425 閱讀 2267

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

.mixin (@s, @color) 


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

.mixin (dark, @color)


.mixin (light, @color)


.mixin (@_, @color)
現在，如果執行:

@switch


: light;


.class
就會得到下列css:

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

具體實現如下：

第乙個混合定義並未被匹配，因為它只接受dark做為首參

第二個混合定義被成功匹配，因為它只接受light

第三個混合定義被成功匹配，因為它接受任意值

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

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

.mixin (@a) 


.mixin (@a, @b)
now if we call .mixin with a single argument, we will get the output of the first definition, but if we call it with two arguments, we will get the second definition, namely @a faded to @b.

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

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

以此例做為開始：

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


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


%) .mixin (@a)
when關鍵字用以定義乙個導引序列(此例只有乙個導引)。接下來我們執行下列**：

.class1 


.class2
就會得到：

.class1


.class2
導引中可用的全部比較運算有： > >= = =< <。此外，關鍵字true只表示布林真值，下面兩個混合是相同的：

.truth (@a) when (@a) 


.truth (@a) when (@a = true)
除去關鍵字true以外的值都被視示布林假：

.class
導引序列使用逗號『,』—分割，當且僅當所有條件都符合時，才會被視為匹配成功。

.mixin (@a) when (@a > 10), (@a < -10)
導引可以無引數，也可以對引數進行比較運算：

@media: mobile;


.mixin (@a) when (@media = mobile) 


.mixin (@a) when (@media = desktop) 


.max (@a, @b) when (@a > @b) 


.max (@a, @b) when (@a < @b)
最後，如果想基於值的型別進行匹配，我們就可以使用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)
個人部落格：付博瀚的個人部落格

less匹配模式

參考 less匹配模式 參考 1 根據傳參的值不同進行匹配 a z a right,m a left,m 呼叫 x.y 2 根據傳參的個數不同進行匹配 test width,color test width width 200px color red div 結果 div.test width,co...

Less的模式匹配

less提供了一種機制，允許根據引數的值來改變 mixin的行為。比如，以下 就可以讓 mixin 根據不同的 switch 值而表現各異 mixin dark,color mixin light,color 此時，在呼叫 mixin 時 如果 switch 設為 light，就會得到淺色 如果 s...

Less學習筆記5 匹配模式

比如 用css去畫乙個三角 這個時候在頁面上會出現乙個朝下的紅色三角形，如果想讓三角形朝上修改 中的 border color transparent transparent red transparent 但是在ie中，此時的小三角會出現乙個黑色的小背景 此時的處理 根據三角的方向，對border...