less css 避免全局变量

Question

我正在寻找避免全局扩散变量的最佳方法。

我用这个配置做了一个测试：

_import.less

@test: #FFF;

_import2.less

@test: #000;

test.less

@import (reference) "_import";

body {
    background: @test;
}

test2.less

@import (reference) "_import2";

div {
    background: @test;
}

index.less

@import "test";
@import "test2";

lessc index.less test.css 的输出看起来仍然像

body {
  background: #000;
}
div {
  background: #000;
}

但我正在寻找的是：

body {
  background: #FFF;
}
div {
  background: #000;
}

使用 less 2.7 或 3.9 会产生相同的行为。
有人知道解决方案吗？
谢谢

Answer 1

您始终可以使用“未命名的命名空间”，即& {}，块来隔离任何内容（包括导入的文件）的范围。

例如：

test.less：

@import "_import";

body {
    background: @test;
}

test2.less：

@import "_import2";

div {
    background: @test;
}

index.less：

& {@import "test";}
& {@import "test2";}

根据您的目标，这些 & {} 块可以直接移动到 test 文件本身中。

---

参考：Local Variable Scoping in Import Files