LESS - Mixin Guards

Mixins Guards - 从简单和简单的步骤开始，从简单和简单的步骤学习，包括概述，安装，嵌套规则，嵌套指令和冒泡，操作，转义，函数，命名空间和访问器，范围，注释，导入，变量， Extend，Mixins，Parametric Mixins，Mixins作为函数，将规则集传递给Mixins，导入指令，导入选项，Mixin Guards，CSS Guards，循环，合并，父选择器，其他函数，字符串函数，列表函数，数学函数，类型函数，颜色定义功能，颜色通道功能，颜色操作，颜色混合功能，命令行使用，在浏览器中使用较少，浏览器支持，插件，编程使用，在线编译器，GUI，编辑器和插件，第三方编译器，框架。

描述

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

下表描述了不同类型的mixins守卫以及描述.

Sr.No.	类型&描述
1	保护比较运算符您可以使用比较运算符(=)来比较数字，字符串，标识符等.
2	Guard逻辑运算符您可以使用和关键字来处理带有警卫的逻辑运算符.
3	类型检查功能它包含用于确定匹配mixins的值类型的内置函数.
4	条件混合 LESS使用默认函数匹配mixin其他混合匹配.

示例

以下示例演示了在LESS文件中使用mixin警卫 :

         Mixin Guards                  Example of Mixin Guards
      Hello World...
      Welcome to Tutorialspoint...

现在，创建 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 通过使用以下命令 :

lessc style.less style.css

执行上述命令;它将使用以下代码自动创建 style.css 文件;

style.css

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

输出

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

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

Mixin Guards