Sass如何导出map所有键？遍历导出仅返回最后一个键如何解决

你在:export块的循环中固定使用name作为属性名，CSS 本身的规则是：同一选择器下的同名属性会按顺序覆盖，最终只有最后一次赋值的结果会生效。你的循环每一轮都在重写name属性的值，因此最终导出的对象里只有map最后一个键。

根据实际需求二选一即可：

• 如果你需要导出整个颜色map的所有键值对，供JS直接按颜色名取值，需要用Sass插值语法将颜色名作为动态属性名，保证每个属性名唯一不会被覆盖：

:export {
  @each $name, $color in $colors {
    #{$name}: $color;
  }
}

导入后可以直接通过导出对象取对应颜色值，比如import colors from './xxx.scss'后用colors.black就能拿到黑色变量值。

• 如果你只需要单独导出所有键的集合，先把所有键拼接为单个列表值，再赋值给唯一的导出属性即可：

// 先收集所有key到列表变量
$color-key-list: ();
@each $name, $color in $colors {
  $color-key-list: append($color-key-list, $name, comma);
}

:export {
  // 单个属性存所有key，值为逗号分隔的字符串
  colorKeys: $color-key-list;
}

JS侧拿到colorKeys字段后，调用.split(', ')就能得到所有键的数组。

注意：Sass中如果要使用变量作为CSS属性名，必须用#{变量名}的插值语法包裹，否则Sass会把属性名识别为普通字符串，不会解析变量。

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