LESS是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。 LESS是一种动态样式表语言，扩展了CSS的功能。 LESS也是跨浏览器友好。CSS预处理器是一种脚本语言，可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。 它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS。

1.安装

LESS的安装比Sass要简单，不需要安装ruby环境，如果是在webpack中使用，直接安装相应的loader就可以了，如下所示：

npm install --save-dev less-loader less

2.快速入门

2.1变量

less使用@符号来定义变量，如下所示：

@width: 10px;
@height: @width + 10px;
#header {
  width: @width;
  height: @height;
}

编译后如下所示：

#header {
  width: 10px;
  height: 20px;
}

2.2混合

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

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered();
}

2.3嵌套

less 提供了使用嵌套代替层叠或与层叠结合使用的能力，如下所示：

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

编译后的代码如下所示：

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

2.4导入

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

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

个人博客