Question

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

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

$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会抛出以下错误：

错误：$ map：（（＆＃34; small＆＃34; 35rem），（＆＃34; medium＆＃34; 55rem），（＆＃34; large＆＃34; 75rem），（＆＃34; xlarge＆＃34; 90rem），（＆＃34; element-breakpoint-1＆＃34; 100rem））不是`map-get＆＃39;
的地图

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

＆＃34;不是`map-get`＆＃34;的地图将新元素添加到映射后出错

1 个答案: