Variable Hoisting

[aleemb]

I for one would love to see support for variable hoisting:

.foo { color: $color }
$color: red !hoist;

Without having support for variable hoisting, it becomes necessary to rely on include order which can be very limiting especially when defining user overrides etc.

[nex3]

The semantics of this would be extremely unclear for anyone who doesn't know programming language terminology. The issues with include order will also become largely moot when we move to the more module-based @use.

[andreyvolokitin]

Maybe it could be described in the docs? After all, users aren't forced to use it...

My problem is that I have a variable which is included in the middle of a file. This variable is there for convenience/readability, in order to be around a block of styles it is related to. And then I have styles for completely different components, located in different files and included before this variable (also for good reasons). And these components would like to use this variable. I could declare this variable at the top of the file with all project-wide global variables. But then I need to jump back and forth between the block of styles and its variable. Later this will be multiplied by the number of such cases.

Instead if I could just hoist this variable, then it will be located at convenient readable place and also could be available elsewhere if it needs to be