SCSS中@media查询无法识别:root定义的断点变量，阴影变量可正常使用

安全阿岳

2026-10-3

问题原因

你遇到的问题核心是原生CSS自定义属性（即var()调用的变量）目前不支持在@media的查询条件中使用，这是CSS规范当前的限制：

浏览器解析页面时，会先判断媒体查询条件，再加载匹配的样式规则，而CSS自定义属性的解析是在样式规则加载阶段才会处理，二者的解析顺序决定了媒体查询条件无法读取到CSS变量值
普通样式属性（比如box-shadow）的解析在CSS变量解析之后，所以可以正常调用var(--shadow-box)

解决方案

方案1：使用SCSS预编译变量存储断点（兼容性最好，推荐）

你可以把断点定义为SCSS变量，SCSS在编译阶段就会把变量替换为对应的实际值，不存在运行时解析的问题：

新建SCSS变量文件（比如variables.scss），定义断点变量：

$max-width-phone: 37.5em;
$max-width-tab-port: 56.25em;
$max-width-phone-tab-land: 75em;
$max-width-desktop: 112em;

// 阴影变量也可以同步定义为SCSS变量，或者继续保留原生CSS变量不影响使用
$shadow-box: 1.6px 4.9px 4.9px -18px rgba(0, 0, 0, 0.096),
  3.8px 11.4px 11.4px -18px rgba(0, 0, 0, 0.138),
  6.9px 20.5px 20.4px -18px rgba(0, 0, 0, 0.17),
  11.4px 34px 33.9px -18px rgba(0, 0, 0, 0.2),
  18.8px 56.1px 55.8px -18px rgba(0, 0, 0, 0.232),
  32.8px 98px 97.6px -18px rgba(0, 0, 0, 0.274),
  71px 212px 211px -18px rgba(0, 0, 0, 0.37);

在需要使用的SCSS文件中引入变量文件，直接调用即可：

// 开头引入变量文件，路径根据你的项目结构调整
@import './variables.scss';

.container{
    max-width: 120rem;
    margin: 8rem auto;
    background-color: var(--colour-white);

    box-shadow: var(--shadow-box);
    min-height: 95vh;
    font-size: 4rem;

    @media (max-width: $max-width-phone) {
        font-size: 50%;
    }
};