A Sass reminder
I’ve used Sass (the CSS extension language, silly) once in the past. Recently I needed to use it again, but had forgotten one important thing when in comes to using partials.
If you have a Sass partial like:
_variables.scss
// Color palette
$primary-orange: #ca9613ff;
$secondary-blue: #3a58a2ff;
…and you try to use it like so:
button.scss
@use 'variables';
.button {
background-color: $primary-orange; // What's wrong?
}
You will end up with a SassError: Undefined variable. error.
The solution? Something that could be called namespaces.
We add the namespace to access the variable like this:
<namespace>.$myvariable
So for this example, we change:
$primary-orange
to
variables.$primary-orange
Then it works.
button.scss
@use 'variables';
.button {
background-color: variables.$primary-orange;
}