如何解决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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。