关于sass的@media媒体查询与!global作用域问题

Question

/* 我希望$remUnit这个变量根据不同的条件来重新赋值，所以加了!global来覆盖全局变量 */
/* 但是问题来了：底部的媒体查询条件重新对$remUnit进行赋值，但是，结果总是会被最后执行的给覆盖掉*/
/* 比如这里的102，屏幕保持1024分辨率还没有触发1920媒体查询，但是最后的结果，$remUnit总是会变成最后一个，也就是192 */
/* 疑问： 难道@media媒体查询是会全部触发覆盖的吗 */
/* 期望的结果：根据不同的分辨率（媒体查询）来对变量$remUnit赋不同的值，比如1024我就希望变成102而不是192 */
$remUnit: null !default;
@media screen and (min-width: 1024px) {
  $remUnit: 102 !global;
}
@media screen and (min-width: 1920px) {
  $remUnit: 192 !global;
}
// 输出结果：1024分辨率下和1920分辨率下，$remUnit总是192

Answer 1

例子1

Sass编译前

$remUnit: null !default;
@media screen and (min-width: 1024px) {
  $remUnit: 102 !global;
}
@media screen and (min-width: 1920px) {
  $remUnit: 192 !global;
}

body {
  width: $remUnit;
}

编译后

body {
  width: 192;
}

例子2

Sass编译前

$remUnit: null !default;
body {
  @media screen and (min-width: 1024px) {
    $remUnit: 102 !global;
    width: $remUnit;
  }
  @media screen and (min-width: 1920px) {
    $remUnit: 192 !global;
    width: $remUnit;
  }
}

编译后

@media screen and (min-width: 1024px) {
  body {
    width: 102;
  }
}
@media screen and (min-width: 1920px) {
  body {
    width: 192;
  }
}