SASS 中多个断点的样式

Question

我在 SASS 中定义了两个 mixin，它们使我可以轻松地放置媒体查询。我遇到的问题是我在许多查询中经常重复自己。也就是说，我的一些样式更改对于平板电脑和移动断点是相同的，而另一些则不同。示例：

.foo
  float: left
  width: 50%
  +tablet()
    float: none
    display: block
    width: 100%
  +mobile()
    float: none
    display: block
    width: 100%

我的 mixins 定义如下：

=tablet
  @media (min-width: #{$mobile-width} + 1) and (max-width: #{$tablet-width})
    @content

=mobile
  @media (max-width: #{$mobile-width})
    @content

我很想做这样的事情：

...
+tablet(), +mobile
  float: none
  display: block
  width: 100%

无法编译，那么让我的 SASS 样式表保持干燥的最佳方法是什么？

Answer 1

您可以将手机和平板电脑媒体定义为字符串，然后连接这些字符串。

Scss 可以轻松转换为sass。

$mobile-width: 320px;
$tablet-width: 760px;

// Media queries as strings
$tablet: "(min-width: #{$mobile-width + 1}) and (max-width: #{$tablet-width})";
$mobile: "(max-width: #{$mobile-width})";

// Converts a list to a string with delimiters between elements
@function join-list($list, $separator: ", ") {
  $result-string: "";

  @each $item in $list {
    // Index of the current item of `$list` list
    $index: index($list, $item);
    $result-string: $result-string + $item;

    // If this is not the last item, adds separator
    @if ($index != length($list)) {
      $result-string: $result-string + $separator;
    }
  }

  @return $result-string;
}

@mixin get-media($medias...) {
  @media #{join-list($medias, " and ")} {
    @content;
  }
}

.foo {
  float: left;
  width: 50%;

  @include get-media($mobile, $tablet) {
  // or @include get-media($mobile) {
  // or @include get-media($tablet) {
    float: none;
    display: block;
    width: 100%;
  }
}

Css 输出：

.foo {
  float: left;
  width: 50%;
}
@media (max-width: 320px) and (min-width: 321px) and (max-width: 760px) {
  .foo {
    float: none;
    display: block;
    width: 100%;
  }
}

SassMeister demo.

Answer 2

根据@Stefan F 的评论，在这种情况下最简单的做法是创建第三个名为（类似于）的 mixin：+both()，它封装了手机和平板电脑的尺寸。（我自己回答这个问题只是因为他没有，而且已经有一段时间了。）

示例：

=both
  @media (max-width: #{$tablet-width})
    @content

用法：

.foo
  float: left
  width: 50%
  +both()
    float: none
    display: block
    width: 100%

SASS 中多个断点的样式

Styles for multiple breakpoints in SASS

sass

mixins

media-queries