Less的简单使用（六）——CSS Guards以及@import规则和Maps的用法

Less的简单使用（六）——CSS Guards以及@import规则和Maps的用法

Guard用于匹配表达式上的简单值或参数个数。它应用于css选择器，是用于声明mixin然后立即调用它的语法糖。要成功的引出if类型语句：将此功能与功能&结合使用，可以将多个guards分组

一、css guards的正常用法

.less文件中的代码：

// Guards直接应用于css样式
@val: true;
button when (@val = true) {
    width: 100px;
}

.css文件中的css代码：

button {
  width: 100px;
}

与&功能结合使用来实现类型声明，从而可以对多个防护进行分组

.less文件中的代码：

@val: true;
& when (@val = true) {
    button {
      color: white;
    }
    a {
      color: blue;
    }
  }

.css文件中的css代码：

button {
  color: white;
}
a {
  color: blue;
}

还可以通过使用if()函数和变量调用来实现类似的模式

.less文件中的代码：