less变量的延迟加载

发表于 2022-12-07 更新于 2023-06-01 分类于 less 阅读次数： Changyan：本文字数： 803 阅读时长 ≈ 1 分钟

less变量在同一个块级作用域，先后定义了两个相同的变量，这时，less的编译结果会有一个意想不到的结果。

我们已知less变量的作用域为块级作用域，每一个花括号为一个作用域块，那如果我们在同一个块级作用域下，同时定义了两个名字相同，但值不相同的变量时，less会怎么编译呢？

我们来看下面这个例子：

.className {
  @color: red;
  color: @color;
  @color: yellow;
}

按照通常的理解，代码多数是按照顺序执行和编译的，那我们认为代码第三行引用的变量，因此按此理解，这段代码应该编译为：

1
2
3

.className {
  color: red;
}

但我们用真实的less编译环境来输出这段代码，返回的结果却是：

1
2
3

.className {
  color: yellow;
}

由结果看到，在当前块级作用域内，靠前的变量引用，却拿到了更靠后的变量定义，这就是“less变量的延迟加载”。

less编译流会优先处理变量的定义和赋值，然后再处理变量的引用，这就导致同一块级作用域内，如果同一个变量被多次赋值，那么，在当前块级作用域内，对此变量的引用，将会得到最后一次赋值的结果。

尝试了一下当前作用域下引用上级作用域的变量，结果也是一样的：

@bgcolor: blue;
.className {
  @color: red;
  color: @color;
  @color: yellow;
  background: @bgcolor;
}
@bgcolor: pink;

输出为：

.className {
  color: yellow;
  background: pink;
}

当然，虽然有这么一个很奇怪的机制，但这种在实际场景中并没有什么意义，通常同一个作用域下，很少会重复为同一个变量赋值，这里纯当一个有趣的知识，了解一下就好了。