I'll try to explain my use-case first.
I have a file called colors.scss and another called immutable-colors.scss in an Angular project.
The difference between both is that (in runtime) I modify colors.scss to text-replace two variables values called $primary-color and $secondary-color to values defined by the final user, and then I recompile it, so the new colors are spread through the whole application (this is the way our team managed to implement custom "themes"). Also, immutable-colors.scss contains color variables that are not meant to be modified (they are general purpose colors).
immutable-colors.scss looks similar to this:
$flag-red: #ffb6c1;
$flag-yellow: #ffd700;
$flag-green: #90ee90;
$shadow-umbra: rgba(#fff, 0.85);
$shadow-penumbra: rgb(136, 136, 136);
$shadow-ambient: rgba(#000, 0.85);
And then implemented like this:
@use '~src/styles/immutable-colors' as *;
/* this is a very simple example */
.undone {
background-color: $flag-red;
}
What I want is to mark those variables something similar to const (typescript) or final (java) to prevent developers from modifying them elsewhere (an immutable behaviour would be ideal). I expect a syntax similar to this:
$flag-red: #ffb6c1 as const;
$flag-yellow: #ffd700 as const;
$flag-green: #90ee90 as const;
$shadow-umbra: rgba(#fff, 0.85) as const;
$shadow-penumbra: rgb(136, 136, 136) as const;
$shadow-ambient: rgba(#000, 0.85) as const;
Is there a way to achieve a similar behaviour to constant variables in scss?
Edit: found this 8yo blog post, please answer if you have something better than that :)
Edit 2: I opened this github issue as it seems nothing similar is yet supported
