Эффективный 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;
}
...

Есть ли способ сгруппировать все селекторы вместе, как в примере с ручным кодированием?

Answer 1

Используйте @extend внутри цикла, чтобы сгруппировать разные правила с одинаковыми значениями.

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

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