css – 动态构建SASS映射,然后使用值

2023年6月13日 193次阅读

参见英文答案 >
“Not a map for `map-get`” error after adding new elements to a mapping                                    1个

基于一些简单的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;
 }

如您所见,新项目的名称和值都是动态的,存储在变量中.令我惊讶的是,这很有用.调试输出确实显示正确添加的新值：

DEBUG：“夕阳”#ff9800
DEBUG：“马鞍”#8b4513
调查：“黄金”#ffd700
调查：“象牙”#ffff0
调试：“橄榄”#808000
DEBUG：“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')

我试图查找的地图的哪个值似乎没关系,它总是抛出这个错误.我的想法是,我想要完成的事情根本不可能,还是我忽略了基本的语法错误？

最佳答案 我认为你不需要引用你的钥匙,例如：

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

map-get($mypalette, jungle);

你也可以使用map-merge：

$new: (
    newcolor: #ffffff
);

map-merge($mypalette, $new);
点赞