SCSS从循环生成的类扩展

Question

我想扩展课程，但它不起作用。我怎么能这样做？

$border: "#e0e0e0";

@for $i from 1 through 10 {
  .p#{$i} {
    padding: ($i*5)px;
  }
}

.bw{
  @extend .p4;

  background: #fff;
  border:1px solid $border;
}

Answer 1

如果我已正确理解您的问题，那么您的代码实际上是正确的:)。

我已经稍微简化了你的代码以帮助更明显地扩展了类，我认为因为生成了很多类，你可能没有看到输出添加了你的.bw类.p4类。

希望我的简化版本能帮助您更深入地了解SASS如何扩展工作。

Play with this gist on SassMeister.

Answer 2

@Harry你是对的，我将padding: ($i*5)px;更改为padding: ($i*5) * 1px;

它有效。感谢