Is there a better way to avoid using globally diffused variables?
I conducted a test with the following setup:
_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";
Even though when I compile lessc index.less test.css
, the result remains as follows:
body {
background: #000;
}
div {
background: #000;
}
However, my desired output is:
body {
background: #FFF;
}
div {
background: #000;
}
I have tried using both less 2.7 and 3.9, but encountered the same behavior.
Does anyone have a solution for this issue?
Thank you.