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

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

DEBUG：＆＃34;夕阳＆＃34; ＃ff9800
调试：＆＃34;马鞍＆＃34; ＃8b4513
调查：＆＃34;黄金＆＃34; ＃ffd700
调查：＆＃34;象牙＆＃34; ＃fffff0
调试：＆＃34;橄榄＆＃34; ＃808000
调试：＆＃34; newcolor＆＃34; #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

我认为你不需要引用你的钥匙，例如：

varchar

您也可以使用map-merge：

nvarchar

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

1 个答案: