LESS 模式匹配
LESS 模式匹配
您可以通过传递参数来更改混合的行为。
考虑一个简单的少代码片段
.mixin(@a; @color) { ... }
.line {
.mixin(@color-new; #888);
}您可以使用不同的值来使@color-new 做出不同的混合行为，如下面的代码所示。
.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，那么它将显示在颜色较深的结果，因为混合定义与dark作为第一个参数匹配。
例子
<!doctype html> <head> <title>Pattern Matching</title> <link rel = "stylesheet" href = "style.css" type = "text/css" /> </head> <body> <h2>Example of Pattern Matching</h2> <p class = "myclass">Welcome to Tutorialspoint...</p> </body> </html>
接下来创建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);
}使用下面的命令编译less文件
lessc style.less style.css
得到css文件
/*style.css*/
.myclass {
color: #b30000;
}输出
执行下面步骤:
保存上述代码到pattern-matching.html文件中.
在浏览器中打开html文件,观察结果.
