Navigate a nested maps with map-fetch() in Sass

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

//
// map-fetch($map, $keys)
//
// An easy way to fetch a deep value in a multi-level map. Works much like
// map-get() except that you pass multiple keys as the second parameter to
// go down multiple levels in the nested map.
//
@function map-fetch($map, $keys) {
  $key: nth($keys, 1);
  $length: length($keys);
  $value: map-get($map, $key);
  @if ($length > 1) {
    $rest: ();
    @for $i from 2 through $length {
      $rest: append($rest, nth($keys, $i))
    }
    @return map-fetch($value, $rest)
  } @else {
    @return $value;
  }
}

$config: (
  themes: (
    mist: (
      header: #dcfac0,
      content: #00968b,
      footer: #85c79c
    ),
    spring: (
      header: #f4fac7,
      content: #c2454e,
      footer: #ffb158
    )
  )
);

@each $theme in map-keys(map-get($config, themes)) {

  .#{$theme} {
    .header  { background-color: map-fetch($config, themes $theme header  ); }
    .content { background-color: map-fetch($config, themes $theme content ); }
    .footer  { background-color: map-fetch($config, themes $theme footer  ); }
  }

}

SassMeister-output.css

.mist .header {
  background-color: #dcfac0;
}
.mist .content {
  background-color: #00968b;
}
.mist .footer {
  background-color: #85c79c;
}

.spring .header {
  background-color: #f4fac7;
}
.spring .content {
  background-color: #c2454e;
}
.spring .footer {
  background-color: #ffb158;
}

@jlong here is a newer version of this nested fetching:

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

In your example above, you could do this to get the mist header color #dcfac0:

map-deep-get($config, "themes", "mist", "header");

+1, Great function! Had the exact same thought about themes and found this before I wrote my own. Thanks for the time-saver!

Great! Exactly what I was looking for!

+1, Thanks for the saving my time ☺️

THANK YOU! 😄

Could this be moved into a repository and published as eyeglass module on npm?

@agrobbin this is great. As I don't completely understand it, is there any chance you could write an error warning into it?

Thaaaaaank you!

What’s the advantage of this over something more standard & built-in like:

Input:

$config: (
  themes: (
    mist: (
      header: #dcfac0,
      content: #00968b,
      footer: #85c79c
    ),
    spring: (
      header: #f4fac7,
      content: #c2454e,
      footer: #ffb158
    )
  )
);

@each $theme-name, $theme-values in map-get($config, themes) {
  .#{$theme-name} {
    @each $section, $color in $theme-values {
      .#{$section} { background-color: $color; }
    }
  }
}

Output:

.mist .header {
  background-color: #dcfac0;
}
.mist .content {
  background-color: #00968b;
}
.mist .footer {
  background-color: #85c79c;
}

.spring .header {
  background-color: #f4fac7;
}
.spring .content {
  background-color: #c2454e;
}
.spring .footer {
  background-color: #ffb158;
}