项目的Sass互属性

我正在用Sass创建一个网格系统。我已经创建了从.col1到.col8的类。现在我想为所有这些类动态地创建一个相互选择器（.col1、.col2、.col8）。我该怎么做

$siteWidth: 80em
$columnCount: 8
$columnWidth: $siteWidth / $columnCount

@for $i from 1 through $columnCount
  .col#{$i}
    width: $columnWidth * $i

---

您需要使用一个

占位符，这个
Sass
：

$siteWidth: 80em;
$columnCount: 8;
$columnWidth: $siteWidth / $columnCount;

%col {
  height: 10px;
}

.col1 {
  @extend %col;
}

@for $i from 1 through $columnCount {
  .col#{$i} {
    @extend %col;
  }
}

@for $i from 1 through $columnCount {
  .col#{$i} {
    width: $columnWidth * $i;
  }
}

将生成此
CSS
：

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8 {
  height: 10px; }

.col1 {
  width: 10em; }

.col2 {
  width: 20em; }

.col3 {
  width: 30em; }

.col4 {
  width: 40em; }

.col5 {
  width: 50em; }

.col6 {
  width: 60em; }

.col7 {
  width: 70em; }

.col8 {
  width: 80em; }

现在，您可能不想设置
height
属性，但您知道了。
您尝试过该代码吗？你有错误吗（错误是什么）？不正确的输出？@cimmanon，是的，代码一开始甚至没有编译，但是经过一些处理和使用
占位符之后，OP可以得到想要的结果。这正是我想要的。非常感谢。