在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语句。