鍍金池/ 問答/HTML5/ 關于sass的@media媒體查詢與!global作用域問題

關于sass的@media媒體查詢與!global作用域問題

/* 我希望$remUnit這個變量根據(jù)不同的條件來重新賦值，所以加了!global來覆蓋全局變量 */
/* 但是問題來了：底部的媒體查詢條件重新對$remUnit進行賦值，但是，結果總是會被最后執(zhí)行的給覆蓋掉*/
/* 比如這里的102，屏幕保持1024分辨率還沒有觸發(fā)1920媒體查詢，但是最后的結果，$remUnit總是會變成最后一個，也就是192 */
/* 疑問： 難道@media媒體查詢是會全部觸發(fā)覆蓋的嗎 */
/* 期望的結果：根據(jù)不同的分辨率（媒體查詢）來對變量$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
回答
編輯回答
焚音

例子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;
  }
}
2017年5月27日 17:40