LESS 是 CSS 预处理器中的一种，由于其与 CSS 的语法非常相似，易于学习和使用，并且可以扩展 CSS 的语法，所以被广泛应用于前端开发中。本文将介绍如何利用 LESS 进行 CSS 扩展，提高代码复用率。
什么是 LESS？
LESS 是一种 CSS 预处理器，它是 CSS 的超集，即所有的 CSS 代码都是有效的 LESS 代码。LESS 可以用来扩展 CSS 的语法，例如添加变量、函数、混合（Mixin）等，让 CSS 的编写更加便捷和强大。
安装 LESS
如果你想使用 LESS，需要先安装 LESS 的编译器，命令如下：
npm install less
LESS 的语法特性
变量
LESS 中可以定义变量，使用 @ 符号来标识一个变量，例如：
@color: #FF0000;
body {
color: @color;
}上面的代码中，@color 定义了一个变量，然后在 body 的样式中使用了这个变量，这样就可以将相同的颜色值多次使用时统一管理。
混合
混合是 LESS 中的一个非常强大的特性，可以将多个样式属性打包成一个样式块，方便重复使用。例如：
-- -------------------- ---- -------
------- -
------ -----
----------- -----
------- --- ----- -----
-
-------------- -
--------
----------- -----
-上面的代码中，.button 定义了一个样式块，.custom-button 继承了 .button 的所有属性，然后覆盖了 background 属性，从而创建了一个新的样式块。
运算
LESS 中支持对数值进行运算，例如：
-- -------------------- ---- -------
----------- -----
------ -
---------- ---------- - --
-
---- -
---------- ---------- - --
-上面的代码中，@base-size 定义了一个基础的字体大小，然后 .small 和 .big 样式都使用了运算符对字体大小进行了变换。
函数
LESS 中还提供了一些常用的函数，例如 color()，用于改变颜色值的亮度、饱和度等。例如：
-- -------------------- ---- -------
------- --------
-------- -
------ --------------- -----
-
------- -
------ -------------- -----
-上面的代码中，@color 定义了一个颜色变量，然后 .lighter 样式使用了 lighten() 函数将颜色变亮，.darker 样式使用了 darken() 函数将颜色变暗。
示例代码
下面是一个 LESS 的示例代码，使用了上面介绍的 LESS 语法特性：
-- -------------------- ---- -------
------------ -----
------- -
------ -----
----------- ------------
------- --- ----- ------------
-
-------------- -
--------
----------- -----
-
----------- -----
------ -
---------- ---------- - --
-
---- -
---------- ---------- - --
-
------- --------
-------- -
------ --------------- -----
-
------- -
------ -------------- -----
-总结
使用 LESS 可以扩展 CSS 的语法，让 CSS 的编写更加便捷和强大，利用 LESS 中的变量、混合、运算和函数等特性，可以极大的提高代码复用率，降低 CSS 的维护成本。因此，在前端开发中，我们应该积极的学习和使用 LESS，提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ddee92f6b2d6eab393ad7a