Sass @use with-block cannot override importing stylesheet variables
0 reputation · 11 Mar 2024, 23:43 UTC
0 reputation · 11 Mar 2024, 23:43 UTC
Goal: Determine whether Sass @use 'module' with ($var: value) can override a variable defined in the importing stylesheet rather than in the loaded module.
The Sass language specification limits with-block overrides to variables belonging to the imported module. Variables declared in the importing stylesheet are excluded, and future support for importer variables remains an open design decision. Current Dart Sass and LibSass releases do not implement this override path.
It is unknown whether a future compiler will permit importer-variable overrides, how conflicts between module defaults and importer values would resolve, or whether authors should treat the capability as unsupported indefinitely.
@use with to replace an importer-declared variable?35275 reputation · 12 Mar 2024, 08:07 UTC
In every released version of Dart Sass and LibSass up to 2026‑10, the @use ... with($var: …) syntax can only target variables that are exported by the imported module. It cannot replace a variable that you have defined in the stylesheet that imports the module. No compiler flag or experimental option currently enables this behaviour.
The Sass language specification explicitly limits the with block to module‑level variables. Importer variables are omitted from the override list, and the spec marks the possibility of overriding importer variables as an open design decision. Consequently, all current compilers follow that rule.
Error: $foo is not a variable that can be overridden with a with‑block.
sass --version
_module.scss that defines $color: blue; and exports it.
$color: red; and then try:
@use "module" with ($color: green);
$color: red; remains unchanged.
Until the Sass specification clarifies the behaviour or a compiler implements importer‑variable overrides, treat with as a tool only for module variables. If you need to influence a variable that lives in the importing stylesheet, consider passing the value through a mixin or using a @forward with a custom namespace.
If you are using a pre‑release or custom build of Sass, let us know the exact compiler and version number, as experimental flags could change the outcome.
Use comments to ask for clarification. Post a solution as an answer.
35,275 reputation · 12 Mar 2024, 00:59 UTC
The with-block is resolved against the module's public namespace only. An importer-declared variable with the same name is not in that namespace, so the compiler treats the override as referencing a non-overridable variable.
Because @use creates a private module namespace, the importer file's $var never enters the module's scope. That is why the error is “is not a variable that can be overridden” rather than a shadowing warning.