Sass/SCSS变量中使用CSS自定义属性实现媒体查询遇阻

核心矛盾是Sass变量是编译时解析，而CSS自定义属性是运行时生效：

• 你把Sass变量$primary-min-width赋值为var(--primary-min-width)，编译后的媒体查询会变成@media (min-width: var(--primary-min-width) + 1px)
• 这段CSS完全无效：CSS自定义属性无法在媒体查询中直接做数值运算，且早期浏览器对媒体查询里使用var()支持有限，就算支持，+ 1px的写法也不符合CSS语法（必须用calc()包裹）

方案1：优先用Sass变量做编译时处理（推荐） #

把基础值存在Sass变量里，再衍生出CSS自定义属性，这样媒体查询能在编译阶段就生成合法的数值：

// 先定义Sass变量
$primary-min-width: 768;
// 再生成带单位的CSS自定义属性
--primary-min-width: #{$primary-min-width}px;

// 编译时直接计算数值，生成合法的媒体查询
@media (min-width: $primary-min-width + 1px) {
    /* CSS properties here */
}

编译后的最终CSS会是：

--primary-min-width: 768px;

@media (min-width: 769px) {
    /* CSS properties here */
}

方案2：纯CSS原生实现（需注意浏览器兼容性） #

如果必须依赖CSS自定义属性，要提前给属性加上单位，并用calc()处理运算，同时确保目标浏览器支持媒体查询中使用var()和calc()：

:root {
    --primary-min-width: 768px;
}

@media (min-width: calc(var(--primary-min-width) + 1px)) {
    /* CSS properties here */
}

• 直接查看编译后的CSS代码，确认媒体查询的最终写法是否符合语法规范
• 验证目标浏览器版本：Chrome 66+、Firefox 61+才支持媒体查询中使用var()和calc()
• 确保CSS自定义属性的作用域覆盖到媒体查询生效的元素（比如定义在:root下实现全局生效）

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