SCSS 字体堆栈混合错误："argument `$map` of `map-get($map, $key)` must be a map"

Question

在我的项目中，我使用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);

在试图编译最后一行时，gullow-sass抛出错误。

Answer 1

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

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

您需要将map-deep-get函数添加到Sass中，使其与节点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模块系统，您必须使用@use "sass: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);