在CSS 3媒体查询中使用Sass变量

Question

在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;它返回一个未定义变量的错误。知道我错过了什么吗？

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 e.g.       #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米辛会像这样=base_width_changes($base_width)     #wrapper         width: $base_width

Answer 2

类似飞利浦·佐德勒的回答，你可以用混音来做。如果您想要的话，可以将所有内容都放在一个文件中。@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); }

Answer 3

请不要使用此解决方案。罗南的回答要好得多。作为干法解决方案，您可以使用@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"; }使用媒体查询中定义的变量定义文件中的所有响应元素。所以，您需要重复的就是import语句。