SASS品牌色映射生成异常：仅提取首个键值对原因咨询

数据老陈

2026-5-15

问题：SASS函数仅生成首个品牌色的明暗色调映射

我一眼就看出问题所在了——你的generate-map函数里的@return语句放错位置啦！

问题根源

当你在@each循环内部使用@return时，函数会在第一次完成循环迭代时就立刻终止并返回结果。这意味着你的函数处理完primary-color后就直接返回了，后面的secondary-color完全没机会被处理，自然也就不会出现在最终的调色板里。

解决方案：先构建完整映射再返回

我们需要先初始化一个空映射，在循环过程中把每个品牌色的明暗色调变体逐步合并进去，等所有颜色都处理完毕后，再统一返回这个完整的映射。这里会用到SASS的map-merge函数来实现映射的逐步构建。

修正后的完整代码如下：

// 原始品牌色映射
$brand-colors: (
  brand-color: (
    primary-color: #0096d6,
    secondary-color: #1a4760,
  ),
) !default;

// 修正后的生成函数
@function generate-map($map) {
  // 初始化空映射，用于存储所有生成的颜色变体
  $generated-map: ();
  
  @each $item, $colors in $map {
    @each $color-name, $value in $colors {
      // 生成当前颜色的明暗色调集合
      $color-variants: (
        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%),
      );
      
      // 将当前颜色的变体合并到总映射中
      $generated-map: map-merge($generated-map, ($color-name: $color-variants));
    }
  }
  
  // 所有颜色处理完成后，返回完整映射
  @return $generated-map;
}

// 生成最终的品牌调色板
$brand-palette: (
  brand-palette: generate-map($brand-colors)
) !default;