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

Question

我正在生成一些利润率最高的实用程序类，并创建了一个sass循环/函数，它以px增量8的方式工作。

这两种情况都是：

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

带有媒体查询样式的较小类被初始页边距-top-6类覆盖。

如何使sm: class将覆盖初始边距-顶级-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);
    }
  }
}

和一个工作演示。