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文件,观察结果.