SASS：生成的CSS与循环不匹配

我试图在SASS中使用@for循环生成最佳CSS

以身作则胜过言辞：

我的俏皮话：

@for $i from 1 through 2 {
  .table-lg-#{$i}, .table-md-#{$i}, .table-sm-#{$i}, .table-xs-#{$i} {
        background:red;
    }
}

SASS产生了什么：

.table-lg-1, .table-md-1, .table-sm-1, .table-xs-1 {
  background: red;
}

.table-lg-2, .table-md-2, .table-sm-2, .table-xs-2 {
  background: red;
}

我希望SASS生成的内容：

.table-lg-1, .table-md-1, .table-sm-1, .table-xs-1, .table-lg-2, .table-md-2, .table-sm-2, .table-xs-2 {
  background: red;
}

---

您有什么解决方案吗？

创建一个静默类，并在

for

循环中扩展它

%background-color {
  background: red;
}

@for $i from 1 through 2 {
  .table-lg-#{$i}, .table-md-#{$i}, .table-sm-#{$i}, .table-xs-#{$i} {
        @extend %background-color;
    }
}

---

%background-color {
  background: red;
}

@for $i from 1 through 2 {
  .table-lg-#{$i}, .table-md-#{$i}, .table-sm-#{$i}, .table-xs-#{$i} {
        @extend %background-color;
    }
}

---

%background-color {
  background: red;
}

@for $i from 1 through 2 {
  .table-lg-#{$i}, .table-md-#{$i}, .table-sm-#{$i}, .table-xs-#{$i} {
        @extend %background-color;
    }
}

---

%background-color {
  background: red;
}

@for $i from 1 through 2 {
  .table-lg-#{$i}, .table-md-#{$i}, .table-sm-#{$i}, .table-xs-#{$i} {
        @extend %background-color;
    }
}

---

.

太好了！非常感谢：）太好了！非常感谢：）太好了！非常感谢：）太好了！非常感谢：）