Question

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

.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样式表DRY的最佳方法是什么？

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中多个断点的样式

2 个答案: