使用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; 它会为未定义的变量返回一个错误。 任何想法我失踪？

Answer 1

这根本不可能。 由于触发@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 

Answer 2

类似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); } 

Answer 3

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

作为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"; } 

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

Answer 4

我有同样的问题。

$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; } }