SCSS font-stack mixin error: "argument `$map` of `map-get($map, $key)` must be a map"

Question

I have a problem with this mixin in my project where I'm using gulp-sass:

$base-font-stack: (
   sfprodisplay: (
      regular: (
         family: (SFProDisplay, sans-serif),
         weight: 400,
         style: normal
      ),      
      bold: (
         family: (SFProDisplay, sans-serif),
         weight: 700,
         style: normal
      ),
   ),

   ubuntu: (
      light: (
         family: (Ubuntu, sans-serif),
         weight: 300,
         style: normal
      ),
      regular: (
         family: (Ubuntu, sans-serif),
         weight: 400,
         style: normal
      ),      
   )
);

@mixin font($group, $variant: regular, $properties: family weight style, $font-stack: $base-font-stack) {
   $font-properties: map-deep-get($font-stack, $group, $variant);
   
   @if $font-properties {
     @each $property, $values in $font-properties {
       @if contains($properties, $property) {
         font-#{$property}: map-get($font-properties, $property);
       }
     }
   }
 }

It's not a duplicate question, the problem is:

I checked this in sassmeister and got errors on this lines:

$font-properties: map-deep-get($font-stack, $group, $variant);

font-#{$property}: map-get($font-properties, $property);

and gulp-sass throw error when trying to compile this last line.

@Andy, not sure if you've already figured out your solution, but I left an answer - both for Node-Sass and Dart-Sass. — robertp, Apr 06 '21 at 16:59

score 1 · Answer 1 · answered Apr 06 '21 at 16:59

I tried your code with Node-Sass and Gulp, as you described.

You seem to be missing the map-deep-get function, so the value of $font-properties is an interpolated string instead of a map.

You need to add the map-deep-get function to your Sass to make it work with node-sass:

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

   @return $map;
}

I copied the map-deep-get function from this CSSTricks article: https://css-tricks.com/snippets/sass/deep-getset-maps/.

Interestingly, I also tried your code with dart-sass (sass) and the "new" Sass Module System, where you specifically have to import the built-in map module using @use "sass:map". The great thing about the new map module, is that map-get handles deeply nested maps out of the box (https://sass-lang.com/documentation/modules/map), so if you use dart-sass, you can just use the built in map-get, without having to define your own map-deep-get function:

@use "sass:map";
...
$font-properties: map-get($font-stack, $group, $variant);

SCSS font-stack mixin error: "argument `$map` of `map-get($map, $key)` must be a map"

1 Answers1