dictionarysassscss-mixins

How do I reference another value in the current SASS map/dictionary?


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?


Solution

  • 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