使用CSS3媒体查询使用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像素的布局。 如果我像这样翻译@media语句:

 @media screen and (min-width: 1171px) {$base_width: 1160px;} @media screen and (max-width: 1170px) {$base_width: 960px;} 

它会产生960像素的布局,不管屏幕宽度如何。 另外请注意,如果我删除第一行$base_width: 1160px; 它会为未定义的变量返回一个错误。 任何想法我失踪?

这根本不可能。 由于触发@media screen and (max-width: 1170px)发生在客户端。

只有SASS抓住样式表中包含$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 eg #wrapper width: $base_width ... @media screen and (min-width: 1171px) $base_width: 1160px #wrapper width: $base_width ... 

这不是真的干,但你可以做的最好的。

如果每次你也可以准备一个包含所有变化值的混音时,这些变化是相同的,所以你不需要重复。 另外,您可以尝试将mixin与特定更改结合使用。 喜欢:

 @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 

Mixin看起来就像这样

 =base_width_changes($base_width) #wrapper width: $base_width 

类似Philipp Zedler的回答,你可以用mixin来完成。 这可以让你在一个单一的文件,如果你想要的一切。

 @mixin styling($base-width) { // your SCSS here, eg #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); } 

编辑:请不要使用这个解决方案。 罗宁的答案好多了。

作为DRY解决方案,您可以在媒体查询中使用@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"; } 

您可以使用媒体查询中定义的变量定义包含文件中的所有响应元素。 所以,你需要重复的是进口声明。

我有同样的问题。

$menu-width变量在移动视图@media only screen and (max-width : 768px)上应该是240px,在桌面视图上应该是@media only screen and (max-width : 768px)和340px。

所以我只是创建了两个变量:

 $menu-width: 340px; $menu-mobile-width: 240px; 

以下是我如何使用它:

 .menu { width: $menu-width; @media only screen and (max-width : 768px) { width: $menu-mobile-width; } }