“不是‘map-get’的地图"；将新元素添加到映射后出错 [英] "Not a map for `map-get`" error after adding new elements to a mapping

问题描述

如何将映射合并到 sass 中的现有映射中?

How can I merge a mapping into an existing mapping in sass?

我目前在 _config 部分中使用 sass 映射来定义我的断点，例如:

I am currently using sass maps in a _config partial to define my breakpoints, for example:

$breakpoints: (
    small: 35rem,
    medium: 55rem,
    large: 75rem,
    xlarge: 90rem,
    element-breakpoint-1: 100rem,
    element-breakpoint-2: 110rem 
);

@mixin breakpoint($width) {
    @media screen and (min-width: map-get($breakpoints, $width)) {
        @content;
    }
}

.element {
    width: 100px;
    @include breakpoint(element-breakpoint-1) {
        width: 200px;
    }
    @include breakpoint(element-breakpoint-2) {
        width: 300px;
    }
}

理想情况下，我希望能够向现有映射添加新断点:

Ideally I would like to be able to add new breakpoints to the existing mapping:

@function array-append($list, $value) {
    @return join($list, $value);
}

$breakpoints: array-append($breakpoints, (element-breakpoint-1: 100rem, element-breakpoint-1: 110rem));

问题是断点mixin没有看到$breakpoints列表中的新值，SASS抛出如下错误:

The issue is that the breakpoint mixin does not see the new values in the $breakpoints list and SASS throws the following error:

错误:$map: (("small" 35rem), ("medium" 55rem), ("large" 75rem), ("xlarge" 90rem), ("element-breakpoint-1" 100rem)) is not`map-get' 的地图

Error: $map: (("small" 35rem), ("medium" 55rem), ("large" 75rem), ("xlarge" 90rem), ("element-breakpoint-1" 100rem)) is not a map for `map-get'

推荐答案

您正在寻找的函数是 map-merge()，而不是 join().join() 函数用于将列表连接在一起，并导致您的映射转换为列表列表.

The function you're looking for is map-merge(), not join(). The join() function is for joining lists together and is causing your mapping to get converted to a list of lists.

$fix-mqs: false;
$breakpoints: (
    small: 35rem,
    medium: 55rem,
    large: 75rem,
    xlarge: 90rem
);

// map-merge here, not join
$breakpoints: map-merge($breakpoints, (element-breakpoint-1: 100rem, element-breakpoint-2: 110rem));

@mixin breakpoint($width) {
    @if $fix-mqs {
        @if $fix-mqs >= map-get($breakpoints, $width) {
            @content;
        }
    }
    @else {
        @media screen and (min-width: map-get($breakpoints, $width)) {
            @content;
        }
    }
}

@include breakpoint(element-breakpoint-2) {
  .foo {
    color: red;
  }
}

输出:

@media screen and (min-width: 110rem) {
  .foo {
    color: red;
  }
}

这篇关于“不是‘map-get’的地图"；将新元素添加到映射后出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！