LESS 变量

LESS 变量是指在 LESS 嵌套规则上下文中声明的变量，只要变量的值不变，就可以在整个 LESS 文件中使用它。

声明和使用 LESS 变量

LESS 变量的声明以 @ 为前缀，例如：

@header-color: #333;

使用声明的变量时，必须在前面加上 @ 前缀，例如:

h1 {
  color: @header-color;
}

LESS 编译器会将变量的值作为 CSS 具体值输出。在样式表编译后，上述代码块将被编译为：

h1 {
  color: #333;
}

变量作用域

LESS 变量遵循作用域链的规则，变量可以在声明它的规则范围内使用。如果变量在规则中没有声明，则会在规则外查找变量。这意味着 LESS 变量可以被声明在规则的顶部，以便在整个文件中使用。例如：

@header-color: #333;

h1 {
  color: @header-color;
}

h2 {
  color: @header-color;
}

变量插值

在 LESS 中，可以在选择器或属性中插入变量使用。要在 LESS 中插入一个变量，请使用的 @{} 括号，例如：

@my-selector: banner;

.@{my-selector} {
  font-size: 2em;
}

编译后：

.banner {
  font-size: 2em;
}

在上面的示例中，变量 @my-selector 的值为 banner。 在使用变量的选择器中，此值被插入到类名之前。

注意事项

• LESS 变量的命名应该 explicitly、clearly 和 meaningfully。
• 不要在 LESS 变量的名称中包含连字符，因为它们会被解释为运算符。
• 在整个 LESS 文件中使用相同的变量名称，并尝试避免将同一变量名称用于不同的目的。
• 在 LESS 中声明和命名变量时，遵循良好的命名习惯。
• 虽然 LESS 变量不是 CSS 自定义属性，但两者的基本目的非常相似，因此您可以查看如何使用 CSS 自定义属性的文档，以获得有关更多最佳实践和其他提示的更多建议。

结论

在 LESS 中，变量是一种方便、简单和易于维护的方法。 他们可以用来保存颜色、边框、边距和其他用户在整个页面中使用的元素。如果您使用 LESS，考虑将变量添加到 LESS 文件中以提高代码质量和可维护性。