sass - 在 CSS3 媒体查询中使用 Sass 变量

Question

我正在尝试将 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 然后在基于样式表宽度百分比的测量值的不同点定义，以生成流畅的布局。

当我这样做时，变量似乎被正确识别，但媒体查询的条件却没有。例如，无论屏幕宽度如何，上面的代码都会生成 1160px 的布局。如果我像这样翻转@media 语句:

@media screen and (min-width: 1171px) {$base_width: 1160px;}
@media screen and (max-width: 1170px) {$base_width: 960px;}

它会生成一个 960 像素的布局，同样与屏幕宽度无关。另请注意，如果我删除 $base_width: 1160px; 的第一行，它会返回 undefined variable 的错误。有什么想法我想念的吗？

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
          ...

这不是真正的 DRY，而是你能做的最好的。

如果每次更改都相同，您还可以准备一个包含所有更改值的 mixin，这样您就不需要重复了。此外，您可以尝试将 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