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

问题描述

在我使用 gulp-sass 的项目中，这个 mixin 有问题：

$base-font-stack: (
   sfprodisplay: (
      regular: (
         family: (SFProdisplay,sans-serif),weight: 400,style: normal
      ),bold: (
         family: (SFProdisplay,weight: 700,),ubuntu: (
      light: (
         family: (Ubuntu,weight: 300,regular: (
         family: (Ubuntu,)
);

@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,$variant);

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

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

解决方法

我用 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 模块系统尝试了您的代码，您必须在其中使用map。新地图模块的伟大之处在于，@use "sass:map"开箱即用地处理深度嵌套的地图（https://sass-lang.com/documentation/modules/map），因此如果您使用dart-sass，您可以只使用内置的 map-get，而无需定义您自己的 map-get 函数：

map-deep-get