我试图结合使用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;}
它产生一个960px的布局，无论屏幕宽度如何。还要注意，如果我删除$ base_width：1160px的第一行;它返回一个未定义变量的错误。任何想法我错过了什么？
解决方法
这根本不可能。因为触发器@media屏幕和(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 e.g.
#wrapper
width: $base_width
...
@media screen and (min-width: 1171px)
$base_width: 1160px
#wrapper
width: $base_width
...
这不是真的DRY，但最好的你可以做。
如果每次你也可以准备一个包含所有变化的值的修改，那么你不需要重复它。此外，您可以尝试将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
