如何在Sass中将现有map转换为键值均修改后的新map

你可以通过Sass内置的map操作能力结合遍历语法实现该需求，完整实现如下： #

新版Sass（Dart Sass，推荐） #

需要先引入Sass官方内置的工具模块：

// 引入内置模块
@use "sass:map";
@use "sass:color";

// 原始颜色Map
$colors: (
  "primary": "#0d6efd",
  "secondary": "#6c757d"
);

// 初始化空的新Map
$colors-light: ();

// 遍历原始Map逐个处理键值
@each $key, $value in $colors {
  $new-key: "#{$key}-light";
  $new-value: color.lighten($value, 20%);
  // 合并新键值到结果Map
  $colors-light: map.merge($colors-light, ($new-key: $new-value));
}

旧版Sass（LibSass、Ruby Sass） #

无需引入模块，直接使用全局函数即可：

$colors: (
  "primary": "#0d6efd",
  "secondary": "#6c757d"
);
$colors-light: ();
@each $key, $value in $colors {
  $colors-light: map-merge($colors-light, ("#{$key}-light": lighten($value, 20%)));
}

结果验证 #

可以通过debug指令确认转换结果：

@debug $colors-light;
// 输出示例：("primary-light": #66a3ff, "secondary-light": #b1b6bb)

内容的提问来源于stack exchange，提问作者Liero