使用 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 }
}