我正在尝试将Sass变量的使用与@media查询结合使用,如下所示:
$base_width:1160px;
@media screen and (max-width: 1170px) {$base_width: 960px;}
@media screen and (min-width: 1171px) {$base_width: 1160px;}
Run Code Online (Sandbox Code Playgroud)
$base_width 然后在基于样式表宽度百分比的测量中的各个点处定义,以产生流体布局.
当我这样做时,变量似乎被正确识别,但媒体查询的条件不是.例如,无论屏幕宽度如何,上面的代码都会产生1160px的布局.如果我像这样触发@media语句:
@media screen and (min-width: 1171px) {$base_width: 1160px;}
@media screen and (max-width: 1170px) {$base_width: 960px;}
Run Code Online (Sandbox Code Playgroud)
无论屏幕宽度如何,它都会产生960px的布局.另请注意,如果我删除它的第一行,$base_width: 1160px;则返回未定义变量的错误.我缺少什么想法?