使用SCSS生成多个类

Question

我希望有几个类间距：

.spacing-top-20 {
  margin-top: 20px;
}
.spacing-top-40 {
  margin-top: 40px;
}
.spacing-top-60{
  margin-top: 60px;
}

//and so on...

是否有可能使SCSS以某种方式生成多个非常相似的类？我知道使用mixins会很好，但是你仍然会为你想要的每个间距写下来。

Answer 1

您可以使用@for指令：

@for $i from 1 to 4 {
    .spacing-top-#{$i * 20} { margin-top: $i * 20px }
}