在CSS 3媒體查詢中使用Sass變量我試圖將Sass變量的使用與@media查詢結合起來，如下所示：$base_width:1160px;
@media screen and (max-width: 1170px) {$base_width: 960px;}
@media screen and (min-width: 1171px) {$base_width: 1160px;}$base_width然后在樣式表寬度基于百分比的測量中的不同點定義，以生成流體布局。當我這樣做時，似乎正確地識別了變量，但是媒體查詢的條件卻沒有被正確識別。例如，上面的代碼生成一個1160 px布局，而不考慮屏幕寬度。如果我翻動一下@media語句，如下所示：@media screen and (min-width: 1171px) {$base_width: 1160px;}
@media screen and (max-width: 1170px) {$base_width: 960px;}它產生一個960px的布局，同樣不管屏幕的寬度。還請注意，如果我刪除了$base_width: 1160px;它返回一個未定義變量的錯誤。知道我錯過了什么嗎？
3 回答
偶然的你
TA貢獻1841條經驗 獲得超3個贊
@media screen and (max-width: 1170px)
$base_width
@media screen and (max-width: 1170px) $base_width: 960px // you need to indent it to (re)set it just within this media-query // now you copy all the css rules/properties that contain or are relative to $base_width e.g. #wrapper width: $base_width ... @media screen and (min-width: 1171px) $base_width: 1160px #wrapper width: $base_width ...
@media screen and (min-width: 1171px) +base_width_changes(1160px) #width-1171-specific-element // additional specific changes, that aren't in the mixin display: block
=base_width_changes($base_width) #wrapper width: $base_width
一只萌萌小番薯
TA貢獻1795條經驗 獲得超7個贊
@mixin styling($base-width) {
// your SCSS here, e.g.
#Contents {
width: $base-width;
}
}
@media screen and (max-width: 1170px) {
@include styling($base-width: 960px);
}
@media screen and (min-width: 1171px) {
@include styling($base-width: 1160px);
}
慕桂英546537
TA貢獻1848條經驗 獲得超10個贊
@import
@media screen and (max-width: 1170px) {
$base_width: 960px;
@import "responsive_elements";
}
@media screen and (min-width: 1171px) {
$base_width: 1160px;
@import "responsive_elements";
}- 3 回答
- 0 關注
- 650 瀏覽
添加回答
舉報
0/150
提交
取消