动态构建 SASS 映射，然后使用这些值

Question

基于一些简单的 SASS 逻辑，我尝试动态生成颜色列表或地图。首先从静态列表开始：

$mypalette: (
   'jungle':    $color-green,
   'sky':       $color-blue,
   'sunset':    $color-orange,
   'saddle':    $color-saddle,
   'gold':      $color-gold,
   'ivory':     $color-ivory,
   'olive':     $color-olive
 );

接下来，我想开始动态地向该地图添加颜色：

 $n : 'newcolor';
 $v : #ffffff;

 $mypalette: append($mypalette, ($n $v)); 

 @each $color in $mypalette {
    @debug $color;
 }

正如您所看到的，新项目的名称和值都是动态的，存储在变量中。令我有些惊讶的是，这有效。调试输出确实正确显示了添加的新值：

调试：“日落”#ff9800
调试：“马鞍”#8b4513
调试：“金色”#ffd700
调试：“象牙色”#fffff0
调试：“橄榄色”#808000
调试：“newcolor”#ffffff

最后一部分是实际使用列表中的值：

 html {
    background: map-get($mypalette, 'ivory') !important;
 }

不幸的是，这就是它崩溃的地方：

> error src/scss/main.scss (Line 401 of src/scss/_theme.scss: $map:
> (("jungle" #bbd910), ("sky" #2196f3), ("sunset" #ff9800), ("saddle"
> #8b4513), ("gold" #ffd700), ("ivory" #fffff0), ("olive" #808000), ("newcolor" #ffffff)) is not a map for `map-get')

我试图查找地图的哪个值似乎并不重要，它总是会抛出此错误。我脑海中的问题是，我想要完成的任务根本不可能实现，还是我忽略了基本的语法错误？

Answer 1

我认为您不需要引用您的密钥，例如：

$mypalette: (
   jungle: $color-green
);

map-get($mypalette, jungle);

您也可以使用地图合并：

$new: (
    newcolor: #ffffff
);

map-merge($mypalette, $new);