为什么SCSS变量在媒体查询时不改变值？

SCSS变量在媒体查询时不改变值是因为媒体查询是在CSS编译阶段进行的，而SCSS变量是在编译之前被解析和替换的。

媒体查询是用于根据设备的特性（如屏幕宽度、高度、方向等）来应用不同的样式规则。在编译阶段，SCSS代码会被转换为CSS代码，而媒体查询的条件会被解析为CSS中的@media规则。

SCSS变量在编译阶段会被解析和替换为其对应的值，然后生成CSS代码。而媒体查询的条件是在CSS编译阶段进行判断的，此时已经无法再改变变量的值。

举个例子来说明，假设有以下SCSS代码：

$color: red;

@media screen and (max-width: 768px) {
  .element {
    color: $color;
  }
}

$color: blue;

在编译阶段，SCSS变量$color会被解析为red，生成的CSS代码如下：

@media screen and (max-width: 768px) {
  .element {
    color: red;
  }
}

可以看到，媒体查询中的颜色值已经被固定为red，无法根据后续的变量赋值改变。

如果想要在媒体查询中改变变量的值，可以考虑使用CSS自定义属性（CSS Variables）来实现。CSS自定义属性是在运行时解析的，可以根据媒体查询的条件动态改变属性的值。

以下是一个使用CSS自定义属性的示例：

:root {
  --color: red;
}

@media screen and (max-width: 768px) {
  .element {
    color: var(--color);
  }
}

:root {
  --color: blue;
}

在这个例子中，CSS自定义属性--color被用作颜色值，并且可以在媒体查询中根据需要动态改变其值。