Sass &引用;不是“地图获取”的地图;向映射添加新元素后出错
如何将映射合并到sass中的现有映射 我目前正在使用Sass &引用;不是“地图获取”的地图;向映射添加新元素后出错,sass,Sass,如何将映射合并到sass中的现有映射 我目前正在使用\u config部分中的sass映射来定义断点,例如: $breakpoints: ( small: 35rem, medium: 55rem, large: 75rem, xlarge: 90rem, element-breakpoint-1: 100rem, element-breakpoint-2: 110rem ); @mixin breakpoint($width) { @
\u 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:((“小”35rem)、(“中”55rem)、(“大”75rem)、(“xlarge”90rem)、(“元素断点-1”100rem))不是“map get”的映射
您要查找的函数是
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;
}
}
这看起来很有希望!当我回到办公室时,威尔会把这件事给我一个机会。