为什么在媒体查询中设置的Sass全局变量始终生效？

问题原因 #

你混淆了Sass变量的编译逻辑和CSS媒体查询的生效逻辑：

• Sass是预编译语言，所有变量赋值、计算逻辑都会在代码编译为CSS的阶段执行完成，不会保留到浏览器运行阶段。你写的代码中，Sass编译时不会判断媒体查询的条件是否成立，会直接执行所有赋值语句，带!global标识的赋值会直接覆盖全局的$global-padding，最终所有调用该变量的位置编译后得到的值都是0.5em。
• CSS媒体查询是浏览器运行时的规则，只会根据当前视口尺寸动态切换对应的CSS样式，不会参与Sass的预编译过程。

解决方案 #

方案1：使用CSS原生自定义属性（推荐）

CSS原生变量支持运行时动态修改，可以完美适配媒体查询的动态生效逻辑：

:root {
  --global-padding: 1em;
}
@media only screen and (max-width: 20em) {
  :root {
    --global-padding: 0.5em;
  }
}

/* 使用示例 */
.box {
  padding: var(--global-padding);
}

方案2：拆分Sass变量对应的样式规则

如果必须使用Sass变量，需要将使用变量的CSS规则分别在媒体查询内外声明：

$padding-pc: 1em;
$padding-mobile: 0.5em;

.box {
  padding: $padding-pc;
}
@media only screen and (max-width: 20em) {
  .box {
    padding: $padding-mobile;
  }
}

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