Imagine wanting to set a universal value for a variable, but also be able to override it for specific selectors. The SASS documentation claims this is achievable.
The documentation states that variables are only accessible within the level of nested selectors where they are defined. If defined outside any nested selectors, they can be accessed everywhere.
Therefore, one would assume that values like "green" and "red" assigned to $text-color would be limited to their respective nested selectors, with $text-color defaulting to "blue" when used elsewhere, such as within .foo.
$text-color: blue;
.green {
$text-color: green;
color: $text-color;
}
.red {
$text-color: red;
color: $text-color;
}
.foo {
color: $text-color;
}
However, the SASS compilation results in:
.green {
color: green;
}
.red {
color: red;
}
.foo {
color: red;
}
If anyone can provide some insight into this issue, I’d greatly appreciate it.