将媒体查询保存在变量中答案

【问题标题】：Save media query in variable将媒体查询保存在变量中
【发布时间】：2015-02-04 20:11:09
【问题描述】：

是否可以将媒体查询保存为变量？

这不起作用：

$max: @media (max-width: 980px) and (min-width: 768px);

我不是在寻找如何保存最大宽度和最小宽度，而是整个字符串。

【问题讨论】：

丹尼尔斯回答有效，应该被选中。

标签： variables media-queries sass

【解决方案1】：

使用类似的东西

  @mixin respondTo($media) {
    @if $media == smallScreen {
      @media only screen and (max-width: $screenSmall - 1) { @content; }
    } @else if $media == mediumScreen {
      @media only screen and (max-width: $screenMedium) and (min-width: $screenSmall) { @content; }
    } @else if $media == largeScreen {
      @media only screen and (min-width: $screenXlarge) { @content; }
    }
  }

然后您可以执行以下操作：

.products {
  @include respondTo(smallScreen) {
    width: 300px;
  }

  @include respondTo(mediumScreen) {
    width: 700px;
  }
}

【讨论】：

【解决方案2】：

从 Sass 3.2 开始，您可以将媒体查询存储在如下变量中：

$bp-small: "(min-width: 30em)";

@media #{$bp-small} {
    .foo {
        color: red;
    }
}

【讨论】：