less学习（九）—关于Guards

最新推荐文章于 2022-10-14 15:24:38 发布

原创最新推荐文章于 2022-10-14 15:24:38 发布 · 572 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #less

less 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了LESS CSS中的Guards概念及其应用。Guards用于匹配简单的值或参数数量，并应用于mixin声明，通过比较和逻辑运算符实现不同的样式效果。此外，还展示了如何在CSS选择器中使用Guards来替代if/else语句。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Less Mixin Guards

如果你想在表达式上匹配简单的值或参数数量，那么你可以使用Guards。它与mixin声明相关联，并包括附加到mixin的条件。每个mixin将有一个或多个由逗号分隔的防护，并且guard必须括在括号中。 LESS使用Guards的mixins而不是if / else语句，并执行计算以指定匹配的mixin。

下面列出了不同类型的mixins guard以及描述。

1、Guard比较运算符：可以使用比较运算符（=）来比较数字，字符串，标识符等

2、Guard逻辑运算符：可以使用‘和’关键字处理带有Guards的逻辑运算符

3、类型检查函数：包含内置函数来确定匹配mixin的值类型

4、LESS Mixin Guards：less使用默认函数mixin与其他mixin进行匹配

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}
.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}
.mixin (@a) {
   color: @a;
}
.class1 {
   .mixin(#FF0000)
}
.class2 {
   .mixin(#555)
}

输出为：

.class1 {
  font-size: 14px;
  color: #FF0000;
}
.class2 {
  font-size: 16px;
  color: #555;
}

Less CSS Guards

Guard用于匹配表达式上的简单值或参数个数。它应用于CSS选择器。它是用于声明mixin并立即调用它的语法。要成功地引出 if 类型语句; 将此功能与功能＆结合使用，您可以将多个guards分组。

@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 {
  background-color: blue;
  color: white;
}