SASS : Generated CSS not optimal with loop

Question

I'm trying to generate optimal CSS with a @for loop in SASS.

An example is better than words :

My SASS:

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

What SASS generates:

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

What I would like SASS to generate :

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

Do you have any solutions?

Answer 1

Create a silent class and extend it inside of the for loop.

%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.