“添加新元素到映射后，不是map-get'的映射”

Question

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

我目前使用的青菜地图在_config部分来定义我的断点，例如：

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

我非常希望能够为新的断点添加到现有的映射：

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

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

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

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

Answer 1

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

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