LESS 是一种动态样式语言，它扩展了 CSS，使之更加灵活和可维护。LESS 中的变量可以帮助开发者更好地控制样式，使代码更加简洁和易于维护。本文将介绍如何在 LESS 中自定义变量并调用。
定义变量
在 LESS 中定义变量非常简单，只需使用 @ 符号和变量名。例如，下面的代码定义了一个变量 main-color 并将其设置为红色：
@main-color: red;
调用变量
在 LESS 中，可以使用 @{variable} 语法来调用变量。例如，如果要将变量 main-color 应用于文本颜色，可以使用以下代码：
h1 {
color: @main-color;
}此代码将使所有 <h1> 标签的文本颜色均为红色。
使用变量进行计算
在 LESS 中，变量不仅可以应用于颜色和文本样式，还可以用于计算。例如，如果要将多个变量相加，可以使用以下代码：
@width: 100px; @padding: 10px; @total-width: @width + 2 * @padding;
此代码将创建一个名为 total-width 的变量，其值将是 100px + 2 * 10px，即 120px。
继承变量
在 LESS 中，可以从一个变量继承值并将其应用于另一个变量。例如，下面的代码使用颜色值 @main-color 创建两个新的变量：
@main-color: #333; @main-bg: @main-color; @main-border: @main-color;
此代码将创建两个新的变量：@main-bg 和 @main-border，它们的值将均为 #333。
示例代码
下面是一个示例代码，它演示了在 LESS 中定义变量并将它们应用于样式：
-- -------------------- ---- ------- ------------ ----- ---------- -------- --------- ----- ---- - ----------------- ---------- ---------- ----- - --- --- -- - ------ ------------ - -- - ---------- ----- ----------- --------- - -- - ---------- ----- - -- - ---------- ----- - - - ------ ----- ----------- ----- -
此代码将创建 @main-color 变量并将其应用于所有标题标签中的文本颜色。还创建了 @bg-color 和 @padding 变量，并将它们应用于 body 和标题标签的边距和背景颜色。最后，该代码设置了段落文本的颜色和边距。
总结
LESS 的变量功能使 CSS 的编写变得更加方便。变量可以存储颜色、尺寸和其他样式值，从而让开发者可以更好地控制样式和布局。使用 LESS 变量可以使 CSS 更具可读性、可维护性和可重用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6489693c48841e98947b260e