Less模式匹配

可以通過傳遞參數來改變它混合的行爲。

考慮一個簡單的 Less 的代碼片段：

.mixin(@a; @color) { ... }

.line {
.mixin(@color-new; #888);
}

您可以使用 @color-new 不同的值，來設置 mixin 的行爲，如下面的代碼。

.mixin(dark; @color) {
color: darken(@color, 15%);
}
.mixin(light; @color) {
color: lighten(@color, 15%);
}

@color-new: dark;

.line {
.mixin(@color-new; #FF0000);
}

如果設置@color-new 爲黑暗(dark)值，那麼它就會在較暗的顏色顯示的結果作爲 mixin 定義黑暗匹配第一個參數。

示例

下面的例子演示了 LESS 文件使用模式匹配：

Example of Pattern Matching

Welcome to Yiibai Yiibai...

接下來，創建文件 style.less。

style.less

.mixin(dark; @color) {
color: darken(@color, 15%);
}
.mixin(light; @color) {
color: lighten(@color, 15%);
}

@color-new: dark;

.myclass {
.mixin(@color-new; #FF0000);
}

你可以編譯 style.less 使用下面的命令來生成 style.css 文件：

lessc style.less style.css

接着執行上面的命令，它會自動創建 style.css 文件，下面的代碼：

style.css

.myclass {
color: #b30000;
} 

輸出結果

讓我們來執行以下步驟，看看上面的代碼工作：

• 保存上面的HTML代碼在 pattern-matching.html 文件。

• 在瀏覽器中打開該HTML文件，得到如下輸出顯示。