Does lazy-loading variable evaluation impact nested mixin scope?

Answer

Local variables defined inside a mixin shadow a later‑defined global variable with the same name. The lazy‑loading of variables does not change this precedence.

Confirmed facts

• Less resolves variables lazily during the final rendering phase, not at the point of declaration.
• When a name exists in both a local (mixin) scope and the global scope, the lookup stops at the nearest defining scope – the local mixin variable wins.
• The order of @import statements does not affect this rule; all imports are merged into a single global scope before lazy evaluation begins.

Likely explanation

Because variable lookup is performed after the entire stylesheet tree is built, the runtime environment walks the scope chain from the innermost block outward. A variable assigned later in the global scope is still visible, but only if no nearer definition exists. Therefore a mixin‑local assignment always overrides a global assignment, regardless of when the global value is supplied.

Steps to verify

1. Create a Less file that defines a mixin using a variable @color and then locally overrides @color inside the mixin.
2. After the mixin definition, assign a different value to the global @color.
3. Compile with lessc (e.g., lessc test.less test.css).
4. Inspect the generated CSS: the rule produced from the mixin should use the local value, while any rule outside the mixin should use the global value.
5. Repeat the test after swapping the order of the @import statements that bring in the mixin and the global definition; the output should remain unchanged.

Missing diagnostic detail

To confirm that the behavior matches your environment, please specify the version of Less you are using (e.g., 3.x, 4.x, or an earlier release). If you are on a pre‑3.x version, the lazy‑loading rules may differ and could affect precedence.