Using SASS how do I pass more than two arguments using map-get?

careforapint 0
Viewed 29

I have a color map that looks like this:

  $colors: (
    brand-blue: (
        lightest: #87B9D9,
        lighter: #3395D4,
        light: #0370B7,
        base: #232D4B,
    )
  )

I'm trying to call a specific color using "map-get"

#foo {
  border: 1px solid map-get($colors, brand-blue, base);
}

I'm getting errors that I can't call more that two arguments. What am I doing wrong? Or, more importantly is there something I can do differently?

Thanks

sass
2 Answers

As stated in the documentation:

Only Dart Sass supports calling map.get() with more than two arguments.

If you're not using Dart Sass, you can use a helper function such as this one to create your own map-get with multiple keys support:

@function map-deep-get($map, $keys...) {
   @each $key in $keys {
      $map: map-get($map, $key);
   }
   @return $map;
}

#foo {
  border: 1px solid map-deep-get($colors, brand-blue, base);
}
Arkellys0

Use this

map-get($colors, "brand-blue", "base")
userSS610
Related