Sass中媒体查询内修改变量值始终返回deskConfig是否正常？

没错，这确实是Sass的预期行为，核心原因和Sass的编译机制直接相关，我给你拆解清楚：

为什么会出现这种情况？ #

Sass是预编译型CSS处理器，所有变量的赋值与替换操作，都是在代码编译阶段就完成的——而媒体查询是浏览器在运行时才会识别的显示规则，两者不在同一个处理阶段。

你写的这段代码：

$var: mobiConfig; 
@media (min-width: 750px) { 
  $var: deskConfig; 
}

在编译时，Sass会按顺序处理所有变量赋值：最后一次给$var赋值的是deskConfig，所以编译后的CSS里，所有用到$var的地方都会被直接替换成deskConfig。媒体查询里的变量赋值相当于被“跳过”了，因为编译阶段根本不关心媒体查询的运行时条件。

怎么实现“按屏幕尺寸切换配置”的需求？ #

如果需要根据屏幕尺寸动态切换配置，推荐用CSS自定义属性（原生变量），它是运行时生效的，能在媒体查询里正常修改：

// 定义全局CSS变量
:root {
  --config: mobiConfig;
}

// 在媒体查询里更新变量
@media (min-width: 750px) {
  :root {
    --config: deskConfig;
  }
}

// 使用变量
.your-element {
  some-property: var(--config);
}

如果你的场景必须依赖Sass的编译时逻辑，可以用混合宏（mixin）封装不同断点的配置：

@mixin config-styles($device) {
  @if $device == mobile {
    // 移动端配置样式
    background: #eee;
  } @else if $device == desktop {
    // 桌面端配置样式
    background: #333;
  }
}

// 基础移动端样式
.your-element {
  @include config-styles(mobile);
}

// 桌面端断点覆盖样式
@media (min-width: 750px) {
  .your-element {
    @include config-styles(desktop);
  }
}

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