I have a SASS map of colors, and I want some of the colors to just reference another color from the map.
For example
$colors: (
special-red: #a82523,
red: special-red
)
However, when I run this, the value of map-get($colors, red)
is literally special-red
. I want the value to be #a82523
.
How do you do this?
it's not possible, to add a key when your map is not event initialized. You can assign the value to a variable $special-red: #a82523; and then assign that in the map
$special-red: #a82523;
$colors: (
special-red: $special-red,
red: $special-red
)
But if you really want to do that, then you can create a mixin and look up through that
$colors: (
special-red: #009CDC,
red: special-red
);
@mixin themeColor1($color) {
$mapColor: map-get($colors, $color);
@if map-has($mapColor) {
color: map-get($colors, $mapColor)
} @else {
color: map-get($colors, $color)
}
}
.my-class {
@include themeColor1(red);
}
.my-class2 {
color: map-get($colors, special-red);
}
But my recommendation is approach 1, set variables