SASS : Generated CSS not optimal with loop [duplicate]

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?

Nils Kaspersson · Accepted Answer · 2015-02-04 15:45:54Z

3

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.

answered Feb 4, 2015 at 15:45

Nils Kaspersson

9,4933 gold badges32 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

SASS : Generated CSS not optimal with loop [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related