sass - 高效的 SASS 循环

Question

我目前有一些像这样的手工编码的 SASS；

.tl1 td, .tl1 /deep/ th,
.tl2 td, .tl2 /deep/ th,
.tl3 td, .tl3 /deep/ th,
.tl4 td, .tl4 /deep/ th,
.tl5 td, .tl5 /deep/ th,
....
{ text-align: left; }

我正在尝试将其重构为 SASS for 循环，但是，如果不对每一行进行新的声明，尚不清楚如何做到这一点。

IE - 这个 SASS 循环；

@for $i from 1 through 50 {
  .tl#{$i}  td,  .tl#{$i}  /deep/ th {
    text-align: left;
  }
}

使每个语句原子化，就像这样；

.tl1 td, .tl1 th 
{
  text-align: left;
}
.tl2 td, .tl2 th 
{
  text-align: left;
}
.tl3 td, .tl3 th 
{
  text-align: left;
}
...

有没有办法将所有选择器组合在一起，就像手工编码的例子一样？

标签： sass

Answer 1

在循环中使用@extend以将具有相同值的不同规则分组。

%text-left{
  text-align: left;
}

@for $i from 1 through 50 {
  .tl#{$i}{
    td, th, /* deep */ th {
      @extend %text-left;
    }
  }
}