如何在@each块中根据其他变量名定义SCSS变量？

你目前通过映射（map）结合:export将SCSS变量导出到JS的方案，存在SCSS文件中必须用map.get()取值的局限。你尝试用@each循环动态定义普通SCSS变量的方法失败，核心原因是Sass不支持动态创建变量名。

可行解决方案：先定义普通变量，再映射导出 #

我们可以先定义常规SCSS变量，再将这些变量存入映射，最后通过:export导出到JS。这样既满足SCSS里直接使用变量的需求，也能实现变量向JS的导出：

// 1. 定义普通SCSS变量，直接在SCSS中使用
$someColor: #000;
$anotherColor: #FFF;

// 2. 将变量存入映射，用于导出到JS
$theme-colors: (
  'someColor': $someColor,
  'anotherColor': $anotherColor,
);

// 3. 导出映射中的变量到JS
:export {
  @each $key, $value in $theme-colors {
    #{unquote($key)}: $value;
  }
}

Sass官方说明 #

用户偶尔希望使用插值来根据另一个变量定义变量名。Sass不允许这样做，因为这会让人们很难一眼看出变量在哪里定义。不过，你可以定义一个从名称到值的映射，然后使用变量访问它。

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