LESS 是一种 CSS 预处理器，它提供了许多便捷的功能，比如变量、嵌套、混合等。其中，变量是最常用的功能之一，它可以让我们快速改变主题颜色，提高开发效率。
什么是 LESS 变量
LESS 变量就是一个可以重复使用的值，它是由一个变量名和一个值组成的。在 LESS 中，我们可以使用 @ 符号来定义一个变量，例如：
@primary-color: #1890ff;
上面的代码定义了一个名为 primary-color 的变量，它的值是 #1890ff。
如何利用 LESS 变量改变主题颜色
利用 LESS 变量来改变主题颜色非常简单，只需要在样式中使用变量名替换颜色值即可。例如，我们可以使用以下代码来定义一个按钮样式：
.button {
background-color: @primary-color;
color: #fff;
padding: 8px 16px;
border-radius: 4px;
}在上面的代码中，我们使用 @primary-color 变量来设置按钮的背景色，这样，当我们需要改变主题颜色时，只需要修改 @primary-color 变量的值即可，所有使用该变量的样式都会自动更新。
如何定义多个主题颜色
如果我们需要定义多个主题颜色，可以使用以下代码来定义一个主题颜色集合：
@theme-colors: {
primary: #1890ff;
success: #52c41a;
warning: #faad14;
danger: #f5222d;
};在上面的代码中，我们定义了一个名为 theme-colors 的变量，它是一个对象，其中包含了 primary、success、warning 和 danger 四个主题颜色。
接着，我们可以使用以下代码来定义一个根据主题颜色集合生成按钮样式的 mixin：
-- -------------------- ---- ------- ------------------------- - ----------------- -------------------------- ------ ----- -------- --- ----- -------------- ---- - --------------- - ------------------------- - --------------- - ------------------------- - --------------- - ------------------------- - -------------- - ------------------------ -
在上面的代码中，我们定义了一个名为 button-variant 的 mixin，它接受一个参数 @variant，用来指定主题颜色的名称。在 mixin 中，我们使用 @theme-colors[@{variant}] 来获取对应的主题颜色值，并将其应用到按钮样式中。
最后，我们定义了四个按钮样式，分别使用了不同的主题颜色。
总结
利用 LESS 变量来改变主题颜色可以提高开发效率，让我们更快速地完成样式设计。同时，通过定义主题颜色集合和 mixin，我们可以轻松地实现多个主题颜色的切换和样式生成。
完整示例代码如下：
-- -------------------- ---- ------- --------------- -------- -------------- - -------- -------- -------- -------- -------- -------- ------- -------- -- ------- - ----------------- --------------- ------ ----- -------- --- ----- -------------- ---- - ------------------------- - ----------------- -------------------------- ------ ----- -------- --- ----- -------------- ---- - --------------- - ------------------------- - --------------- - ------------------------- - --------------- - ------------------------- - -------------- - ------------------------ -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65064d4295b1f8cacd240972