📌  相关文章
📜  LESS-CSS Guards

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

 

描述

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

例

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

css_guard.htm


   

   
      

         
Welcome to TutorialsPoint

      

        
      

         
The largest Tutorials Library on the web.

接下来，创建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-

lessc style.less style.css

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

style.css

.style {
   background-color: blue;
   color: white;
}

输出

请按照以下步骤查看上面的代码如何工作-

  • 将上面的html代码保存在css_guard.htm文件中。
  • 在浏览器中打开此HTML文件，将显示以下输出。

更少的CSS Guard