sass - 语句的 SCSS 插值

Question

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

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

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

感谢您的帮助。

Answer 1

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

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