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

在extend循环内创建一个静默类和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;
    }
}

Here's a gist

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

1 个答案: