什么是 CSS 变量？
CSS 变量是指能够被反复使用的值，比如颜色值，宽高值以及其它常用值。在 CSS 中使用变量可以避免在代码中重复书写同样的值，同时也可以方便地将一个值分配给多个选择器。CSS 变量可以帮助开发人员使用更简洁、更方便的代码进行前端开发。
LESS 中的变量
LESS 是一种预处理语言，是对基于 CSS 的一种拓展。LESS 增加了许多函数和变量，使 CSS 更加灵活、强大、易于维护。LESS 支持使用变量，并可以通过变量赋值和计算等功能实现快速开发和很好的重用。
在 LESS 中，可以使用 @ 符号表示一个变量，例如定义一个变量来表示背景色：
@background-color: #f5f5f5;
通过以下方式将背景色赋给选择器：
body {
background-color: @background-color;
}在编译时，LESS 会将变量进行替换后输出 CSS 代码。
LESS 变量的优化拓展
嵌套
在 LESS 中，使用嵌套可以更方便地管理 CSS 样式。类似于 CSS 中的层叠样式，使用 LESS 的嵌套可以更加清晰地表达层次和关系。同时，在嵌套选择器中使用变量，在代码中也更加方便和易于维护。
-- -------------------- ---- -------
----- -
------ ----
-------- -
----------------- ------------------
------ ------------
-
-------- -
----------------- ------------------------
-
-Mixins
Mixin 是一个函数，可以将一组属性设置组合起来，方便重复使用。在 LESS 中，可以使用 @mixin 标记定义一个 mixin。
例如，假设有一个需要定制化样式的按钮，可以使用该 mixin：
-- -------------------- ---- ------- ------ ----------------- ------- - ----------------- ---- ------ ------- -------------- ---- ------- ----- -------- ----- - ------- - -------- --------------------- ------ -
在按钮的样式中使用该 mixin，会自动将定义的样式合并到该选择器中。
函数
在 LESS 中，可以使用函数对变量进行操作、计算和判断等。
例如，希望定义一个可以计算网格系统栅格的 mixin，可以使用 LESS 的函数。
-- -------------------- ---- -------
-- ----
--------- ---
-------------- -----
------- -
-----------
-
----------- -
------ -----
------ --- - -------- - ------
------------- --------------
------------ -
------------- --
-
-在上述示例中，使用了两个变量 @columns 和 @gutter-width，以及一个函数 .column()。该函数可以接收一个参数 @n，实现根据 @columns 和 @n 进行计算得出栅格的宽度。
总结
LESS 提供了一系列有用的、复杂的拓展功能，可以帮助前端开发人员更好地管理和维护代码。在 LESS 中，使用变量、嵌套选择器、Mixin 和函数等功能可以使 CSS 代码更加易于编写和维护。学习和使用 LESS 可以提高开发效率和代码质量，减少代码冗余程度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cc666c5ad90b6d0427e769