SASS：如何使用循环生成地图

Question

我的目标是生成一个 SASS map 来存储存储在以下地图中的颜色变体：

  $colors : (

    jet                 : #333333,
    wintergreen-dream   : #588C73,
    eton-blue           : #8FC0A9,
    sunglow             : #FFC33C,
    light-kaki          : #F2E394,
    bege                : #FAF3DD

  );

到目前为止，我使用@function 来检索这些变体：

  @function light       ($color, $val) { @return lighten($color, $val);     }
  @function dark        ($color, $val) { @return darken($color, $val);      }
  @function transparent ($color, $val) { @return transparent($color, $val); }

我希望能够生成的地图如下所示：

  $colors-map : (

    eton-blue : (

        base  : $eton-blue,
        light : lighten($eton-blue, 15%),
        dark  : darken($eton-blue, 15%),
        trans : transparent($eton-blue, .5)


    ),

    jet : (

      base  : $jet,
      light : lighten($jet, 15%),
      dark  : darken($jet, 15%),
      trans : transparent($jet, .5)

    )

    // ...

  );

然而，我已经尝试应用的循环看起来像这样：

@for $key, $value in $colors {}

但是，我天真地认为它可以在地图本身内部工作。

哪些问题更容易回答这个疑问：

• 如何将值添加到 SASS 映射（函数），（键：值）？
• map-merge/map-set 的基本用法？ (@return map-merge($map, $new))

严格来说，我在下面寻找：

$alternative-colors : (

    @each $color, $hex in $colors {

        #{$color} : (

            light : lighten($color, 25%),
            dark  : darken($color, 25%)

        );

    }

);

但是，它返回以下错误：

Error: Invalid CSS after \"...tive-colors : (\": expected \")\", was \"@each (...)

结论

已经过去了很长时间，如果我能与其他人分享我的解决方案，那就太好了。

我创建了一个存储库来存储此问题解决的结果，https://github.com/vladimirlisovets/SASS-Color-Palettes。

希望它对激发更好的事物的人有用。

干杯。

Answer 1

$colors : (
  jet                 : #333333,
  wintergreen-dream   : #588C73,
  eton-blue           : #8FC0A9,
  sunglow             : #FFC33C,
  light-kaki          : #F2E394,
  bege                : #FAF3DD
);

$colors-map: ();

@function create_colour_map($color, $percentage, $opacity) {
  $map: (
    base: $color,
    light: lighten($color, $percentage),
    dark: darken($color, $percentage),
    trans: transparentize($color, $opacity)
  );
  @return $map;
}

@each $key, $value in $colors {
  $map: ();
  $map: map-merge($map, ($key: create_colour_map($value, 15%, 0.5)) );
  $colors-map: map-merge($colors-map, $map);
}

@debug $colors-map; //prints out the map below 
  (jet:               (base: #333333, 
                       light: #595959,
                       dark: #0d0d0d,
                       trans: rgba(51, 51, 51, 0.5)), 
   wintergreen-dream: (base: #588C73, 
                       light: #81b099,
                       dark: #3a5d4c,
                       trans: rgba(88, 140, 115, 0.5)),
   eton-blue:          (base: #8FC0A9,
                        light: #c0dccf,
                        dark: #5ea483,
                        trans: rgba(143, 192, 169, 0.5)), 
   sunglow:            (base: #FFC33C,
                        light: #ffdb89,
                        dark: #efa500,
                        trans: rgba(255, 195, 60, 0.5)),
   light-kaki:         (base: #F2E394,
                        light: #faf5d8,
                        dark: #ead150,
                        trans: rgba(242, 227, 148, 0.5)),
   bege:               (base: #FAF3DD,
                        light: white,
                        dark: #f0db9a,
                        trans: rgba(250, 243, 221, 0.5)))

我将您的三个函数合并为一个，create_colour_map 函数。 colour、percentage 和 opacity 需要三个参数。该函数返回一个map

使用这些 args 调用 create_colour_map(#333333, 15%, 0.5) 会返回 map

(base: #333333, 
 light: #595959,
 dark: #0d0d0d,
 trans: rgba(51, 51, 51, 0.5)
);

我只是循环遍历 $colors 映射，每次调用生成映射的函数，每次迭代都会成为键的值。

如何为地图添加值以及地图合并的基本用法？

我使用map-merge 将值添加到map。顾名思义，它将两个映射连接在一起，并且由于它是一个函数，因此可以在 Sass 需要 值 的地方使用它。所以以下面的代码为例

$map: ( colour: red);
$new_map: (class: blue);

如果我们希望$map 具有与两个映射相同的键和值，我们可以这样写

$map: map-merge( $map, $new_map); // $map: (colour: red, class: blue)

这基本上是说函数的return 值（这将是连接在一起的两个地图）是$map 的值

简单地把那行代码想象成编程语言中的变量重新赋值。这就是您可以使用map-merge 在地图中设置值的方式。 map-merge 方法的第二个参数不需要是预定义的映射变量。本来可以这样写的

$map: map-merge( $map, (class: blue) );

所以这里看起来你正在向$map 变量添加一个新的key 和value