Is there a way to optimize CSS generation using a @for loop in SASS?
An example speaks louder than words:
Here is my SASS code:
@for $i from 1 through 2 {
.table-lg-#{$i}, .table-md-#{$i}, .table-sm-#{$i}, .table-xs-#{$i} {
background: red;
}
}
This is what the 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;
}
However, I would like the 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;
}
If you have any suggestions or solutions, please let me know!