33

Problem: map.get() doesn't work. map-get() does work.

I set up a map of color values and created a simple function to retrieve them.

While doing the retrieval, I followed the Sass documentation which states that you can retrieve a map value using the map.get() function. Using this or any other map.function results in an Error: There is no module with the namespace "map"..

Checking out the map module, I noticed an alternative syntax, map-get(), which does work.

What gives? Am I missing something, like importing the map module, so that I can use it in that form?

Check out my code below:

// Using npm dart `sass 1.26.11`.

$colors: ('primary': black, 'secondary': white);

// Doesn't work    
@function color($color) {
  @return map.get($colors, $color);
}

// Does work
@function color($color) {
  @return map-get($colors, $color);
}

Question: What do I need to change to get the map.get() syntax to work?

LICHEN
  • 566
  • 1
  • 4
  • 10

1 Answers1

64

I am having a similar issue as OP (using dart-sass v1.25.0), and only map-get works, map.get doesn't.

The documentation doesn't seem to be very clear on this, but the (Sass Module System: Draft 6) document on Github explains it better.

It seems like Sass is moving on to using @use in favour of @import for better compatibility with native CSS, and in order to get access to map.get you now must explicitly import the map module using the @use keyword.

So using OP's example, map.get should work:

@use "sass:map";

$colors: ('primary': black, 'secondary': white);

@function color($color) {
  @return map.get($colors, $color);
}
robertp
  • 3,557
  • 1
  • 20
  • 13
  • 4
    Thanks this worked to me, I had to add the `@use "sass:map";` command to make it work. I don't get why this is not explicitly said in the documentation. – Kevin Oswaldo Jan 18 '22 at 16:52
  • Still doesn't work for me using Jekyll's built in SASS compiler. – Jack_Hu Mar 06 '22 at 19:07
  • @KevinOswaldo Note sure if this was published to their docs when you posted. There is a "Heads up!" card at the top of this page: https://sass-lang.com/documentation/modules which explains this entire system of having global aliases `map-get(...)` and how the @use "sass:map" is the way forward. – NickersF Apr 18 '23 at 17:32