全局SCSS定义的CSS自定义变量在媒体查询中未按预期生效

你定义在:root中的--spacing、--iphonewidth属于CSS原生自定义属性（CSS变量），并非Sass变量，两者的执行逻辑存在本质差异：

• CSS变量是浏览器运行时渲染阶段才会解析计算的属性，依赖DOM树的继承关系生效，定义在:root下的变量会全局继承给所有DOM元素，因此在普通元素样式规则中调用var()可以正常获取到值。
• 媒体查询@media的匹配规则是浏览器在CSS预解析阶段就需要确定的，这个阶段DOM树还未构建完成，媒体查询本身不属于任何DOM元素的样式规则，无法继承:root上定义的CSS变量，因此var()在@media中默认不生效，这是CSS标准的限制，和Sass无关。

下面两种方案都可以解决该问题：

• 方案1：改用Sass变量定义全局通用尺寸（推荐）
  将你的全局SCSS文件调整为如下写法，同时兼容Sass变量调用和CSS变量调用场景：

// 先定义Sass全局变量
$spacing: 8px;
$iphonewidth: 375px;

// 同步注入到CSS变量供运行时调用
:root {
  --spacing: $spacing;
  --iphonewidth: $iphonewidth;
}

在媒体查询中直接调用Sass变量即可：

@media screen and (max-width: $iphonewidth) {
  // 你的媒体查询样式
}

普通样式中你可以继续使用var(--spacing)的写法，也可以直接调用$spacing，两者均可正常运行。另外你之前写的calc(#{var(--spacing)} * 2)中的#{}插值属于多余写法，直接改为calc(var(--spacing) * 2)即可正常运行。

• 方案2：使用CSS媒体查询自定义属性语法（兼容性较差）
  如果你需要完全使用CSS变量实现响应式判断，可以使用CSS最新的@custom-media语法，但目前该特性仅在部分现代浏览器中支持，生产环境不推荐使用。

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