「添加新元素到映射後，不是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; 
    } 
}