扫码一下
查看教程更方便
Guard 用于匹配简单值或表达式上的多个参数。 它应用于 CSS 选择器。 它是声明 mixin 并立即调用它的语法。 成功带出if类型语句; 使用功能 &
加入此功能,它允许我们对多个 guard 进行分组。
以下示例演示了在 LESS 文件中使用 css Guard
css_guard.html
<!doctype html> <head> <link rel = "stylesheet" href = "style.css" type = "text/css" /> </head> <body> <div class = "cont"> <h2>Welcome to 迹忆客</h2> </div> <div class = "style"> <h3>The largest Tutorials Library on the web.</h3> </div> </body> </html>
现在,创建 style.less 文件。
style.less
@usedScope: global; .mixin() { @usedScope: mixin; .cont when (@usedScope = global) { background-color: red; color: black; } .style when (@usedScope = mixin) { background-color: blue; color: white; } @usedScope: mixin; } .mixin();
我们可以使用以下命令将 style.less 编译为 style.css
style.css
.style { background-color: blue; color: white; }
按照以下步骤查看上述代码的工作原理