自动生成 sass 个地图

Question

我正在尝试生成一个自动化系统来定义 SASS 中的颜色。

我有一张名为 $brand-colors 的颜色图，我希望使用这张图的颜色在第二张图中生成色调和阴影，无论 $brand 中有多少种颜色-颜色。

这是我到达的地点：

$brand-colors: (
  brand-color: (
    primary-color:        #0096d6,
    secondary-color:      #1a4760,
  ),
) !default;

@function generate-map($map) {
  @each $item, $colors in $map {
    @each $color-name, $value in $colors {
      @return(
        $color-name: (
          light-30:   mix(white, $value, 30%),
          light-20:   mix(white, $value, 20%),
          light-10:   mix(white, $value, 10%),
          base:       $value,
          dark-10:    mix(black, $value, 10%),
          dark-20:    mix(black, $value, 20%),
          dark-30:    mix(black, $value, 30%),
        ),
      );
    };
  };
};

$brand-palette: (
  brand-palette:(
    generate-map($_new-brand-colors)
  ),
) !default;

使用上面的代码，我从终端得到了这个结果：

brand-palette:(
  primary-color:(
    light-30: #4db6e2,
    light-20: #33abde,
    light-10: #1aa1da,
    base: #0096d6,
    dark-10: #0087c1,
    dark-20: #0078ab,
    dark-30: #006996
  )
)

总之，只取了第一个键值对，不明白为什么。 有人可以给我答案吗？

Answer 1

函数和return语句

@return 语句告诉函数停止一切 和return 值。

@function myFunction() {
    @each $item in [a, b, c, d] {
        @return $item;
    }
}

myFunction()只会returna。即使我们有一个包含四个项目的循环，它也只会 运行 一次（第一次），因为它会立即命中 @return 语句。

---

在函数结束时 return 一次的最佳实践

函数的一个最佳实践是有一个 $result 变量，并且只在 结束时调用 @return $result 一次[=函数的 49=]

@function myFunctionFixed() {
    $result;
    @each $item in [a, b, c, d] {
        $result: $result + a;
    }
    @return $result;
}

myFunctionFixed() 将 return abcd 因为我们允许循环从头到尾 运行 而不用 @return 中断它，我们只 return 在循环完成后的函数末尾。

---

使用map-merge增量构建地图

应用上述最佳实践，我们可以将 @return 语句移动到函数的末尾，并使用 map-merge 增量构建一个 $result-map 变量。

@function generate-map($map) {
    $result-map: () !default;
    @each $item, $colors in $map {
        @each $color-name, $value in $colors {
            $result-map: map-merge($result-map, 
                ($color-name: (
                  light-30:   mix(white, $value, 30%),
                  light-20:   mix(white, $value, 20%),
                  light-10:   mix(white, $value, 10%),
                  base:       $value,
                  dark-10:    mix(black, $value, 10%),
                  dark-20:    mix(black, $value, 20%),
                  dark-30:    mix(black, $value, 30%),
                ))
            );
        };
    };
    @return $result-map;
};