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