关于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;
  }
}