已解決430363個問題，去搜搜看，總會有你想問的

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

首頁猿問 ...

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

JavaScript

嚕嚕噠 2018-08-23 22:03:22

/* 我希望$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

查看完整描述

1 回答

慕斯709654

TA貢獻1840條經驗獲得超5個贊

例子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;
  }
}

反對回復 2018-08-26

qq_廣為人知_0
這個方法試了下還是有問題啊例子2

回復 2018-09-05
qq_廣為人知_0
我最后的解決辦法：先在 scss 里面定義兩個變量 $input-width-small: 160px !default; $input-width-big: 220px !default; 在需要媒體查詢的class里面進行引入 .el-input { @media screen and (min-width: 1024px) { width: $input-width-small } @media screen and (min-width: 1920px) { width: $input-width-big } }

回復 2018-09-05
weibo_品茗樂_0
那這樣等于還是寫兩套代碼啊，變量不同名而已

回復 2019-02-12

1 回答
0 關注
2062 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

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

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

1 回答

例子1

例子2

添加回答