如何创建SASS，以使具有相同CSS的类与逗号一起声明？

Question

考虑一下下面的SASS。

@for $i from 1 through 5 {
.col-#{$i} {
position: relative;
}
}

它会编译成下面的CSS。

.col-1 {
  position: relative;
}

.col-2 {
  position: relative;
}

.col-3 {
  position: relative;
}

.col-4 {
  position: relative;
}

.col-5 {
  position: relative;
}

但我希望它像这样编译。

.col-1,
.col-2,
.col-3,
.col-4,
.col-5 {
  position: relative;
}

如何做到这一点？我觉得它应该成为我需要的方式，语法略有不同，但我不能弄清楚。有人能帮帮忙吗？

Answer 1

你可以使用@extend来做你想做的事情：

%relative {
  position: relative;
}

@for $i from 1 through 5 {
  .col-#{$i} {
    @extend %relative;
  }
}

您将获得：

.col-5, .col-4, .col-3, .col-2, .col-1 {
  position: relative;
}

Here是关于@extend如何工作的说明。%符号是用于placeholder selectors的，如果你不想让扩展选择器(这里是%relative)出现在你的CSS中，它是很有用的。