Less 混合守卫

  • 定义和使用

    如果要匹配表达式上的简单值或参数数量,则可以使用防护。 它与 mixin 声明相关联,并且包括附加到 mixin 的条件。 每个 mixin 将具有一个或多个以逗号分隔的警卫; 必须在括号内加一个警卫。 LESS 使用受保护的 mixin 代替 if/else 语句,并执行计算以指定匹配的 mixin。
    下表描述了不同类型的 mixins 防护以及说明。
    序号 类型和说明
    1
    比较运算符(=)
    您可以使用比较运算符(=)来比较数字,字符串,标识符等。
    2
    逻辑运算符(and)
    您可以使用and关键字来解决带有防护的逻辑运算符。
    3
    类型检查功能
    它包含内置函数,用于确定匹配的mixin的值类型。
    4
    条件混合
    LESS使用默认功能将mixin与其他混合匹配项进行匹配。
  • 示例

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

    mixin-guard.html

      <!doctype html>
      <head>
          <meta charset="UTF-8" />
          <title>菜鸟教程(cainiaoya.com)</title>
          <link rel = "stylesheet" href = "style.css" type = "text/css" />
      </head>
      <body>
            <h1>欢迎来到菜鸟教程</h1>
            <p class="class1">Hello 菜鸟教程</p>
            <p class="class2">网络上最大的教程库。</p>
      </body>
      </html>
      
    
    现在让我们创建一个与 CSS 非常相似的文件 style.less,唯一的区别是它将以 .less 扩展名保存。 .html 和 .less 这几个文件都应在 F 盘的文件夹 lesscode 内创建。

    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-
    PS F:\lesscode> lessc style.less style.css
    
    
    当您运行上述命令时,它将自动创建style.css文件。 每当您更改LESS文件时,都需要在cmd中运行上述命令,然后style.css文件将得到更新。
    运行以上命令时,style.css文件将具有以下代码-

    style.css

    .class1 {
       font-size: 14px;
       color: #FF0000;
    }
    
    .class2 {
       font-size: 16px;
       color: #555;
    }
    
    
  • 输出结果

    现在让我们执行以下步骤,看看上面的代码如何工作-
    将上面的 html 代码保存在 mixin-guard.html 文件中。
    在浏览器中打开此 HTML 文件,将显示以下输出。
    less
    如果不懂以上命令操作,请先阅读我们 Less 安装