LESS 是一种 CSS 预处理器，可以使用变量、函数、运算等语法，让 CSS 编写更加简单高效。利用 LESS，我们可以实现品牌颜色快速切换的技巧，让网站在不同品牌需求下快速切换对应的样式。
LESS 变量
LESS 变量可以定义一些 CSS 属性值，然后在后面的样式表中使用这些变量。通过使用变量，我们可以在修改变量的值时自动更新使用此变量的样式。
我们可以定义一个 $brand-color 变量，作为品牌颜色的基础值：
@brand-color: red;
然后，在后面的样式表中使用这个变量：
a {
color: @brand-color;
}
button {
background-color: @brand-color;
}这样，我们只需要修改 $brand-color 变量的值，就可以快速切换品牌颜色。
利用 LESS 函数实现颜色的自动生成
有时候，我们希望生成一系列颜色，而不是仅仅一种品牌颜色。这时候可以利用 LESS 函数来自动生成颜色。
例如，我们希望生成一系列从品牌颜色到白色的颜色。我们可以使用 lighten() 函数来实现：
.brand-colors(@base, @count) when (@count > 0) {
@color: lighten(@base, 10%);
.color-@{count} { background-color: @color }
.brand-colors(@color, @count - 1);
}上面的代码中，我们定义了一个 brand-colors() 函数，它接收两个参数：@base 和 @count。@base 是颜色的基础值，也就是我们的品牌颜色。@count 是要生成的颜色数量。
在函数内部，我们使用 lighten() 函数将 @base 变量变亮 10%，然后使用 LESS 提供的字符串插值功能来生成类名，如 .color-1、.color-2 等。最后，我们递归调用 brand-colors() 函数，直到生成的颜色数量为零。
使用这个函数，我们只需要调用一次就可以生成一系列从品牌颜色到白色的颜色：
.brand-colors(@brand-color, 5);
这将生成 .color-1 到 .color-5 类名，对应 5 种不同的颜色，可以快速应用到我们的样式中。
示例代码
下面是一个完整的 LESS 文件例子，其中包含了上面提到的代码：
-- -------------------- ---- ------- -- ------ ------------- ---- -- ------ - - ------ ------------- - ------ - ----------------- ------------- - -- ------- --------------------------- --- -- ------- -------- - ----------------- --------------------- ----- - -------- - ----------------- --------------------- ----- - -------- - ----------------- --------------------- ----- - -------- - ----------------- --------------------- ----- - -------- - ----------------- --------------------- ----- -
我们可以在 HTML 页面中通过添加 .color-1 到 .color-5 类名来应用生成的颜色：
<div class="color-1"></div> <div class="color-2"></div> <div class="color-3"></div> <div class="color-4"></div> <div class="color-5"></div>
总结
通过利用 LESS，我们可以实现品牌颜色快速切换的技巧，同时可以使用 LESS 中的函数来自动生成一系列颜色。这个技巧在实际开发中非常实用，可以帮助我们快速切换样式，提高效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64741498968c7c53b018408b