Question

我希望能够为我的样式表创建10个类，而不必创建每个类，以防我决定随着时间的推移需要更多。我显然没有这个正确，需要帮助我做错了。

@mixin ladders($num) {
 @for $num from 1 to 10 {
  .ladder-#{$num} {
    border: 1px solid #000;
  }
 }
}

我查看了参考资料，但仍然很难掌握将所有内容放在一起的总体概念。

感谢您的帮助。

Answer 1

首先，你的mixin将总是产生9个类，因为你已经为1 to 10（不包括10个）的for循环进行了硬编码。你需要这样写：

@mixin ladders($num) {
    @for $i from 1 through $num {
        .ladder-#{$i} {
            border: 1px solid #000;
        }
    }
}

然后，你只需要在某个地方调用它，如果你不想要它，它就不必在选择器内部。

@include ladders(5);

输出：

.ladder-1 {
  border: 1px solid black;
}

.ladder-2 {
  border: 1px solid black;
}

.ladder-3 {
  border: 1px solid black;
}

.ladder-4 {
  border: 1px solid black;
}

.ladder-5 {
  border: 1px solid black;
}

语句的SCSS插值

1 个答案: