Less是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表，并构建动态CSS。

安装

直接安装相应的loader即可：

  1. npm install --save-dev less-loader less

基本特性

变量

less使用@符号来定义变量：

  1. @width: 10px;
  2. @height: @width + 10px;
  3. #header {
  4.   width: @width;
  5.   height: @height;
  6. }

编译后如下所示：

  1. #header {
  2.   width: 10px;
  3.   height: 20px;
  4. }

混合

混合是一种重复使用代码的方式，使用混合可以将一个类的属性用于另一个类，并且包含类名作为其属性。 在Less中，可以使用类或id选择器以与CSS样式相同的方式声明mixin。它可以存储多个值，并且可以在必要时在代码中重复使用。如下所示：

  1. .bordered {
  2.   border-top: dotted 1px black;
  3.   border-bottom: solid 2px black;
  4. }
  6. #menu a {
  7.   color: #111;
  8.   .bordered(); /* 在这里使用 */
  9. }

嵌套

less 也提供了嵌套的功能：

  1. #header {
  2.   color: black;
  3. }
  4. #header .navigation {
  5.   font-size: 12px;
  6. }
  7. #header .logo {
  8.   width: 300px;
  9. }

编译后的代码如下所示：

  1. #header {
  2.   color: black;
  3.   .navigation {
  4.     font-size: 12px;
  5.   }
  6.   .logo {
  7.     width: 300px;
  8.   }
  9. }