面试题：CSS预处理器LESS之变量与嵌套基础应用

Question

请阐述LESS中变量的定义方式及使用场景，并举例说明如何在嵌套规则中使用变量来设置元素的字体颜色和背景颜色。

Answer 1

变量定义方式

在LESS中，使用@符号来定义变量，语法为@变量名: 值;。例如：

@primary-color: #007bff;
@font-size: 16px;

使用场景

1. 统一样式管理：当需要在多个地方使用相同的颜色、字体大小等样式属性时，定义变量可方便统一修改。比如网站的主题颜色，若使用变量，只需在变量定义处修改一次，所有使用该变量的地方都会自动更新。
2. 提高代码复用性：减少重复代码，例如在多个不同模块都使用特定的边框样式，可将边框样式定义为变量复用。

在嵌套规则中使用变量设置字体颜色和背景颜色示例

@text-color: #fff;
@bg-color: #333;

.container {
  color: @text-color;
  background-color: @bg-color;

  .inner {
    color: @text-color;
    background-color: lighten(@bg-color, 10%); // 这里使用变量衍生出新的背景色
  }
}

上述代码定义了文本颜色变量@text-color和背景颜色变量@bg-color，在.container及其嵌套的.inner类中使用这些变量来设置字体颜色和背景颜色，同时对背景颜色变量进行了一定的处理（变亮10%）用于.inner类。