SCSS: добавить соседние братья и сестры с помощью цикла for

Question

Я пытаюсь получить следующий код с циклом scss for:

.box {
  margin-left: 0;
  margin-right: 2%;
}
.box + .box {
  margin-left: 2%;
  margin-right: 0;
}
.box + .box + .box {
  margin-left: 0;
  margin-right: 2%;
}
...

Мой цикл for в scss выглядит следующим образом:

.box {
  margin-left: 0;
  margin-right: 2%;

  @for $i from 1 through 4 {
      $sel: if($i == 1, &, selector-nest($sel, &)) !global;

      #{$sel} {
        @if ($i % 2 == 0) {
          margin-left: 0;
          margin-right: 2%;
        } @else {
          margin-left: 2%;
          margin-right: 0;
        }
      }


  }
}

В результате получается следующее:

.box {
  margin-left: 0;
  margin-right: 2%;
}
.box .box {
  margin-left: 2%;
  margin-right: 0;
}
.box .box .box {
  margin-left: 0;
  margin-right: 2%;
}
...

Но я не знаю, как я могу добавить соседний селектор брата между классами.Может быть, я делаю это неправильно.Есть ли лучший способ сделать это, или я могу использовать рекурсивную функцию или что-то подобное?:)

Спасибо за помощь

Answer 1

Это то, что вы хотите:

.box {
  margin-left: 0;
  margin-right: 2%;

  @for $i from 1 through 4 {
      $sel: if($i == 1, &, selector-nest(#{$sel} #{'+'}, &)) !global;

      + #{$sel} {
        @if ($i % 2 == 0) {
          margin-left: 0;
          margin-right: 2%;
        } @else {
          margin-left: 2%;
          margin-right: 0;
        }
      }


  }
}