📌  相关文章
📜  LESS-Mixin Guards

📅  最后修改于: 2020-10-22 07:11:06             🧑  作者: Mango

 

描述

如果要匹配表达式上的简单值或参数数量，则可以使用防护。它与mixin声明相关联，并且包括附加到mixin的条件。每个mixin将具有一个或多个以逗号分隔的警卫队；必须在括号内加上警卫。 LESS使用受保护的mixin代替if / else语句，并执行计算以指定匹配的mixin。

下表描述了不同类型的mixins防护以及说明。

Sr.No. Types & Description
1 Guard Comparison Operators

You can use the comparison operator (=) to compare numbers, strings, identifiers, etc.
2 Guard Logical Operators

You can use the and keyword to work around logical operators with guards.
3 Type Checking Functions

It contains the built-in functions to determine the value types for matching mixins.
4 Conditional Mixins

LESS uses the default function to match mixin with other mixing matches.

例

以下示例演示了在LESS文件中使用mixin防护-

Mixin Guards
      
   

   
      
Example of Mixin Guards

      
Hello World...

      
Welcome to Tutorialspoint...

现在，创建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文件，将显示以下输出。

混合守卫