SASS循环生成的工具类在媒体查询中未按预期生效

嘿，这问题我太熟了！本质上是CSS优先级与代码顺序的问题——媒体查询本身不会提升选择器的优先级，所以如果你的响应式工具类在CSS文件里出现在基础类之前，哪怕它在媒体查询里，也会被后面的基础类样式覆盖。

核心原因 #

你可能是先生成了响应式的sm:前缀类，再生成基础的margin-top-*类。这样编译后的CSS里，基础类的代码在响应式类后面，相同优先级下，后面的样式会覆盖前面的（哪怕前面的在媒体查询里）。

解决方案 #

• 调整SASS循环的生成顺序（最推荐）
  先编译所有基础工具类，再编译带媒体查询的响应式类。这样响应式类的代码会出现在基础类之后，满足“相同优先级，后面覆盖前面”的规则。

示例代码：

// 第一步：生成基础margin-top工具类
@for $i from 1 through 10 {
  .margin-top-#{$i} {
    margin-top: $i * 8px;
  }
}

// 第二步：生成sm断点的响应式工具类
@media (min-width: 640px) { // 这里替换成你的sm断点宽度
  @for $i from 1 through 10 {
    .sm\:margin-top-#{$i} { // 注意冒号在类名里需要转义，部分SASS版本可直接写.sm:margin-top-#{$i}
      margin-top: $i * 8px;
    }
  }
}

• 提升响应式类的优先级（备选方案）
  如果因为项目结构限制没法调整顺序，可以给响应式类加一个额外的选择器来提升权重，比如结合body选择器：

@media (min-width: 640px) {
  @for $i from 1 through 10 {
    body .sm\:margin-top-#{$i} {
      margin-top: $i * 8px;
    }
  }
}

这样body .sm:margin-top-6的优先级比.margin-top-6高，就能强制覆盖基础样式。不过这种方法不如调整顺序优雅，尽量优先用第一种。

• 验证编译后的CSS顺序
  打开浏览器开发者工具，查看生成的CSS文件，确认.sm:margin-top-6的代码是否在.margin-top-6之后。如果基础类在后面，那肯定会覆盖响应式样式，这时候就需要调整SASS的编译顺序。

补充说明 #

记住：媒体查询不会改变选择器的优先级，它只是控制样式在什么条件下生效。只要两个选择器的优先级相同，代码顺序靠后的样式会生效。

内容的提问来源于stack exchange，提问作者Lovelock