Less的模式匹配

2022-08-13 02:12:25 字數 473 閱讀 3425

less提供了一種機制,允許根據引數的值來改變 mixin的行為。比如,以下**就可以讓 .mixin 根據不同的 @switch 值而表現各異:

.mixin (dark,@color)

.mixin (light,@color)

此時,在呼叫 .mixin 時:如果 @switch 設為 light,就會得到淺色;如果 @switch 設為 dark,就會得到深色。如,以下呼叫:

@switch:light;

.class1

@switch2:dark;

.class2

編譯後的css**為:

.class1

.class2

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學習筆記5 匹配模式

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

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

有些情況下,我們想根據傳入的引數來改變混合的預設呈現,比如下面這個例子 mixin s,color class如果想讓.mixin根據不同的 switch值而表現各異,如下這般設定 mixin dark,color mixin light,color mixin color 現在,如果執行 swit...