通过与媒体查询一起使用时，通过SASS循环生成的实用程序类别不会像预期的那样行动

Question

我正在生成一些保证金上的实用程序类，并创建了一个以8。

为PX增量的SASS循环/函数。

这两个都是：

@function size($num) {
    @return #{ ( $num * 8 ) }px;
}
@for $i from 1 through 14 {
    .margin-top-#{$i} {
        margin-top: size($i);
    }
    .sm:margin-top-#{$i} {
        @media all and (max-width: $small-size) {
            margin-top: size($i);
        }
    }
}

将两个添加到一个元素时，例如

<div class="list-item margin-top-6 sm:margin-top-3"></div>

带有媒体查询样式的较小类被初始保证金-6类覆盖。

我该如何制作SM：类将覆盖初始保证金-6类的工作？

在我眼中，这应该因为订购而起作用。

谢谢。

Answer 1

您在正确的路径上，顺序很重要。由于循环生成一般规则，接下来，媒体疑问所有媒体都可以被任何具有较高号码的通用规则覆盖(此后声明(。这是一个示例：

.margin-top-1 {
  margin-top: 8px;
}
@media all and (max-width: 800px) {
  .sm:margin-top-1 {
    margin-top: 8px;
  }
}
.margin-top-2 {
  margin-top: 16px;
}
@media all and (max-width: 800px) {
  .sm:margin-top-2 {
    margin-top: 16px;
  }
}

检查margin-top-2是否将覆盖.sm:margin-top-1

---

一个可能的解决方案是将循环分为两个，这样您就可以确保在一般规则之后声明所有媒体征服。这是一个例子：

$small-size: 800px;
$loops: 14;
@function size($num) {
  @return #{ ( $num * 8 ) }px;
}
@for $i from 1 through $loops {
  .margin-top-#{$i} {
    margin-top: size($i);
  }
}
@for $i from 1 through $loops {
  .sm:margin-top-#{$i} {
    @media all and (max-width: $small-size) {
      margin-top: size($i);
    }
  }
}

和一个工作演示。