Less的基本使用

官方链接：https://less.bootcss.com/#overview

Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量，Mixin，函数等特性，使CSS更易维护和扩展。

变量（Variables）

 /*less*/
@width: 20px;   // 定义变量
@height: @width + 20px;

#header {
  width: @width;    // 使用变量
  height: @height;
  border: 1px solid red;
}

 

编译后

/*css*/
#header {
  width: 20px;
  height: 40px;
  border: 1px solid red;
}

混合（Mixins）

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。

 /*less*/
@width: 20px;   
@height: @width + 20px;

#set {    // 定义
  width: @width;    
  height: @height;
  border: 1px solid red;
}
#header{
    #set()  // 使用
}

嵌套（Nesting）

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。

/*less*/
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

编译后

/*css*/
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

映射（Maps）

从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。

/*less*/
#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

编译后

.button {
  color: blue;
  border: 1px solid green;
}

导入（Importing）

“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

@import "library"; // library.less
@import "typo.css";