SASS:如何在@each 或@for 中打印 n 次 `&`

Question

我的 SCSS 中有以下循环:

@for $i from 1 to 5 {
    .thing-#{$i} {
        @if $i == 1 {
            & + & { /* some styles */ }
        }

        @if $i == 2 {
            & + & + & { /* some styles */ }
        }

        @if $i == 3 {
            & + & + & + & { /* some styles */ }
        }

        @if $i == 4 {
            & + & + & + & + & { /* some styles */ }
        }
    }
}

我如何使用内置的 SASS 函数使代码构建带有 & + & 的行以编程方式？

该算法将是:

& + ((+ &) * $i) { /* styles */ }

Answer 1

你不能用这个语法实现每个函数，你会出现这个语法错误Invalid CSS after "@each $i ": expected "in", was "from 1 to 5 {" .您应该使用 for功能。

如果将此函数转换为算法，则每一步都将具有相同的样式。如果您想要类似的东西，您可以尝试以下操作:

$var: #{"&"};

@for $i from 1 to 5 {

  .thing-#{$i} {
    #{append($var, #{"+ &"})} {
      color: red;
    }
  }

  $var: append($var, #{"+ &"});
}

输出将是

.thing-1 + .thing-1 {
  color: red;
}

.thing-2 + .thing-2 + .thing-2 {
  color: red;
}

.thing-3 + .thing-3 + .thing-3 + .thing-3 {
  color: red;
}

.thing-4 + .thing-4 + .thing-4 + .thing-4 + .thing-4 {
  color: red;
}

一个例子: http://sassmeister.com/gist/84189d6ae6c5a342668e