教程 > less 教程 > 阅读：27

less mixin guards——迹忆客-ag捕鱼王app官网

如果要匹配表达式上的简单值或参数数量，则可以使用 guards。 它与 mixin 声明相关联，并包括附加到 mixin 的条件。 每个 mixin 都会有一个或多个用逗号分隔的guards； 保护必须用括号括起来。 less 使用受保护的 mixin 而不是 if/else 语句并执行计算以指定匹配的 mixin。

下表描述了不同类型的 mixins guard 以及描述。

序号 guard 类型 描述
1 guard comparison operators 我们可以使用比较运算符 (=) 来比较数字、字符串、标识符等。
2 guard logical operators 我们可以使用 and 关键字来处理带有保护的逻辑运算符。
3 type checking functions 它包含用于确定匹配 mixin 的值类型的内置函数。
4 conditional mixins less 使用默认函数将 mixin 与其他混合匹配项进行匹配。

示例

以下示例演示了在 less 文件中使用 mixin guard

mixin-guard.html


   
      迹忆客(jiyik.com) - mixin guards
      
   
   
      
example of mixin guards

      
hello world...

      
welcome to 迹忆客...

现在，创建 style.less 文件。

style.less

.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)
}

我们可以使用以下命令将 style.less 编译为 style.css

style.css

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

按照以下步骤查看上述代码的工作原理

  • 将上述 html 代码保存在 mixin-guard.html 文件中。
  • 在浏览器中打开此 html 文件，将显示以下输出。

less mixin guard

查看笔记

扫码一下
查看教程更方便
网站地图