Less css 守卫

  • 定义

    防护用于匹配简单值或表达式上的多个参数。 它应用于CSS选择器。 它是用于声明mixin并立即调用它的语法。 成功带出if type语句; 通过功能&将其加入,可让您将多个守卫分组。
  • 示例

    以下示例演示了LESS文件中css guard的使用-

    css_guard.html

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

    style.less

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

    style.css

    .style {
       background-color: blue;
       color: white;
    }
    
    
  • 输出结果

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