SASS：生成的 CSS 不是最佳循环

Question

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

例子胜于雄辩：

我的SASS:

@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;
}

你有什么解决办法吗？

Answer 1

在 for 循环内创建静默 class 和 extend 它。

%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;
    }
}

Here's a gist.

SASS：生成的 CSS 不是最佳循环

SASS : Generated CSS not optimal with loop

css

loops

sass