SASS: Как распечатать `` & п раз в @each или @for

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