SCSS 字体堆栈混合错误：“`map-get($map, $key)` 的参数 `$map` 必须是地图”答案

【问题标题】：SCSS font-stack mixin error: "argument `$map` of `map-get($map, $key)` must be a map"SCSS 字体堆栈混合错误：“`map-get($map, $key)` 的参数 `$map` 必须是地图”
【发布时间】：2021-06-22 08:21:29
【问题描述】：

我在使用 gulp-sass 的项目中遇到了这个 mixin 的问题：

$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);
       }
     }
   }
 }

这不是重复的问题，问题是：

我在 sassmeister 中检查了这一点，并在这行得到了错误：

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

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

在尝试编译最后一行时，gulp-sass 会抛出错误。

【问题讨论】：

不，我的 mixin 和 map 命令有问题。
我的错，我将属性误读为变量。 :)
@Andy，不确定你是否已经找到了解决方案，但我留下了一个答案——包括 Node-Sass 和 Dart-Sass。

标签： sass gulp-sass scss-mixins

【解决方案1】：

如您所述，我使用 Node-Sass 和 Gulp 尝试了您的代码。

您似乎缺少map-deep-get 函数，因此$font-properties 的值是插值字符串而不是映射。

您需要将 map-deep-get 函数添加到您的 Sass 以使其与 node-sass 一起使用：

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

   @return $map;
}

我从这篇 CSSTricks 文章中复制了 map-deep-get 函数：https://css-tricks.com/snippets/sass/deep-getset-maps/。

有趣的是，我还使用 dart-sass (sass) 和“新”Sass 模块系统尝试了您的代码，其中您特别需要使用 @987654329 导入内置的 map 模块@。新的 map 模块 的优点在于，map-get 可以开箱即用地处理深度嵌套的地图 (https://sass-lang.com/documentation/modules/map)，所以如果您使用 dart-sass，您可以只使用内置的map-get，而无需定义自己的map-deep-get 函数：

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

【讨论】：