SCSS:与循环添加相邻兄弟姐妹

Question

我正在尝试使用scss for for for for loop：

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

我在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;
        }
      }

  }
}