面试题：CSS LESS预处理器中等难度面试题

Question

请阐述LESS预处理器中变量的定义与使用方式，并举例说明如何通过变量来统一网站主题颜色。同时说明变量作用域在LESS中的规则。

Answer 1

变量的定义与使用

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

@primary-color: #007bff;

2. 使用变量：定义好变量后，可在需要的地方使用@变量名来引用它。例如：

body {
  color: @primary-color;
}

通过变量统一网站主题颜色示例

1. 定义主题颜色变量：

@theme-color: #FF5733;

.header {
  background-color: @theme-color;
}

.button {
  background-color: @theme-color;
  color: white;
}

通过修改@theme-color的值，就可以轻松统一修改整个网站涉及该主题颜色的部分。

变量作用域规则

1. 局部优先：在LESS中，变量作用域遵循类似CSS选择器的规则。如果在一个选择器块内定义了变量，那么这个变量只在该选择器块及其子选择器块内有效，优先于外部同名变量。例如：

@color: blue;

.parent {
  @color: red;
  color: @color; // red
  .child {
    color: @color; // red
  }
}

.other {
  color: @color; // blue
}

2. 向上查找：如果在内部选择器中使用一个未在内部定义的变量，LESS会向上级作用域查找该变量，直到找到或到达最外层作用域。例如：

@outer-color: green;

.container {
  .inner {
    color: @outer-color; // green
  }
}