SASS中实现跨映射取值的自定义函数遇类型错误问题

问题核心 #

你定义了Setup层的两个映射$FontSize、$LineHeight，以及Typography层的$body-attributes（键对应Setup层的映射名），想写一个pointerResolver函数，输入Typography映射和属性名，返回对应Setup映射的取值（比如输入$body-attributes和"LineHeight"时返回1.5）。但用字符串拼接生成变量名的方式报错$map: $LineHeight is not a map.，原因是SASS不支持直接将字符串作为变量名引用，string.unquote("$" + $attributeToSearch)得到的只是字符串，不是真正的映射变量。

正确实现方案 #

SASS虽然没有动态变量，但可以把所有Setup层的映射统一放到一个父映射里，通过键来访问对应的子映射，这样就能实现需求。

修改后的完整代码 #

@use "sass:map";

// 把Setup层的映射统一放到父映射中
$SetupMaps: (
  "FontSize": (
    "xs": 0.75rem,
    "sm": 0.875rem,
    "md": 1rem,
  ),
  "LineHeight": (
    "sm": 1.3,
    "md": 1.5,
  )
);

$body-attributes: ( 
  "FontSize": xs,
  "LineHeight": md,
);

@function pointerResolver($typographyMap, $attributeName){
  // 1. 从Typography映射中获取对应子键
  $subKey: map.get($typographyMap, $attributeName);
  // 2. 从父映射中拿到对应的Setup子映射
  $targetMap: map.get($SetupMaps, $attributeName);
  // 3. 返回子映射中对应的值
  @return map.get($targetMap, $subKey);
}

// 测试：返回1.5
@debug pointerResolver($body-attributes, "LineHeight");
// 测试：返回1rem
@debug pointerResolver($body-attributes, "FontSize");

关键说明 #

• 把分散的Setup映射整合到$SetupMaps父映射中，用属性名作为键，这样可以通过map.get($SetupMaps, $attributeName)直接拿到对应的子映射，避免了动态变量的问题。
• 函数逻辑分三步：先取Typography里的子键，再取对应的Setup子映射，最后取子映射里的具体值，逻辑清晰且符合SASS的语法规则。

为什么原来的方法不行？ #

SASS是预编译语言，变量在编译时就已经确定，无法在运行时通过字符串动态引用变量。string.unquote("$LineHeight")得到的是字符串"$LineHeight"，而不是指向$LineHeight映射的引用，所以map.get会把它当成非映射类型，抛出错误。

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