Support nested maps in sass:map functions

Edited by @nex3

• Proposal
• Specs
• Documentation
• Dart Sass
• LibSass

---

@lunelson project sass-list-maps has support for nested list maps, using the map-get-z function. https://github.com/lunelson/sass-list-maps

The following example says it all:

$list-map-z: (
  alpha (
    beta (
      gamma 3
    )
  )
);

.demo {
  out: map-get-z($list-map-z, alpha); // -> ( beta ( gamma 3 ) )
  out: map-get-z($list-map-z, alpha, beta); // -> ( gamma 3 )
  out: map-get-z($list-map-z, alpha, beta, gamma); // -> 3
}

FACT: Up to a point, even when using maps extended naming conventions come into play. Using map-get-z we can actually use structure to categorize versus naming conventions. I vote for structure every time.

$carousel: (
  color (
    header (
      border gray,
    )
  )
);

$side-nav: (
  bg gray,
  color (
    hover (
      search yellow,
      home red,
      filter blue
    )
  )
);

block {
  color: map-get-z($side-nav, color, hover, filter);
}

block {
  border-color: map-get-z($carousel, color, header, border);
}

I don’t mind using the plug-in, but I think that this is a feature that Sass should support natively.

[nex3]

I forgot to mention: since the proposal was accepted and the blog post soliciting comments published on 16 September, the countdown has begun for public comment. I’ll give it two weeks with the option of going longer if there’s substantial discussion. If there isn’t, on 30 September it will be locked in and we’ll ship the feature in Dart Sass.

[mirisuzanne]

There’s a formal proposal in development. See the links directly above.