SCSS中map-get无法解析CSS var()的原因及解决方案咨询

问题原因 #

SCSS 是预编译工具，map-get() 是编译阶段执行的函数，它要求传入的键名是编译时就能确定的明确字符串。而 var(--padding-top) 属于 CSS 自定义属性（运行时变量），它的实际值要等到浏览器渲染页面时才会被解析。

在编译 SCSS 时，var(--padding-top) 会被当作普通的字符串字面量处理，并不是你定义的 $site-section-padding 映射中的键名（比如'XS'），自然无法从映射中取出对应的值。

可行解决办法 #

1. 把 SCSS 映射转为全局 CSS 变量 #

先将 SCSS 映射里的键值对自动生成对应的全局 CSS 变量，之后直接在组件样式中引用这些预生成的 CSS 变量：

// 全局SCSS文件
$site-section-padding: (
  'default': 0px,
  'XXS': 8px,
  'XS': 16px,
  'S': 24px,
  'M': 32px,
  'L': 40px,
  'XL': 56px,
  'XXL': 72px
);

// 自动生成全局CSS变量
:root {
  @each $key, $value in $site-section-padding {
    --section-padding-#{$key}: #{$value};
  }
}

然后在组件样式中使用：

.class {
  transition: background-color 500ms ease-out;
  background: var(--background-color);
  // 若组件内有SCSS变量存储键名，直接拼接引用，同时设置默认值
  padding-top: var(--section-padding-#{$padding-top}, var(--section-padding-default));
  padding-bottom: var(--section-padding-#{$padding-bottom}, var(--section-padding-default));
}

如果是通过 HTML 元素的 style 属性传入键名（比如 <div class="class" style="--padding-key-top: XS">），可以用 CSS 变量的 fallback 做兼容：

.class {
  padding-top: var(--section-padding-#{var(--padding-key-top)}, var(--section-padding-default));
}

2. 生成预设类名，通过 HTML 类控制 padding #

利用 SCSS 的 @each 循环，直接生成不同 padding 对应的类名，通过给 HTML 元素添加类来控制样式：

// 全局SCSS文件
$site-section-padding: (
  'default': 0px,
  'XXS': 8px,
  'XS': 16px,
  'S': 24px,
  'M': 32px,
  'L': 40px,
  'XL': 56px,
  'XXL': 72px
);

// 批量生成顶部padding类
@each $key, $value in $site-section-padding {
  .pt-#{$key} {
    padding-top: $value;
  }
}

// 批量生成底部padding类
@each $key, $value in $site-section-padding {
  .pb-#{$key} {
    padding-bottom: $value;
  }
}

在 HTML 中使用：

<div class="class pt-XS pb-M"></div>

这种方式完全在编译阶段完成样式生成，不需要依赖运行时变量，兼容性更好。

3. JS 动态计算并设置 padding #

如果必须通过 CSS 变量传递键名，可以用 JavaScript 读取预生成的 CSS 变量，动态计算并设置 padding 值：

// 假设已按方法1生成全局CSS变量
const targetEl = document.querySelector('.class');
// 获取传入的键名
const topKey = getComputedStyle(targetEl).getPropertyValue('--padding-top').trim();
// 取出对应的padding值，无匹配则用默认值
const topValue = getComputedStyle(document.documentElement).getPropertyValue(`--section-padding-${topKey}`) 
  || getComputedStyle(document.documentElement).getPropertyValue('--section-padding-default');
// 设置到元素上
targetEl.style.paddingTop = topValue;

这种方式适合需要动态修改 padding 的交互场景。

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