Производить вложенные селекторы, используя цикл SCSS?

Question

Можно ли использовать цикл (или рекурсию) в SCSS для создания чего-то подобного?

div {margin-top: 1px}
div > div {margin-top: 2px}
div > div > div {margin-top: 3px}
div > div > div > div {margin-top: 4px}

Answer 1

Возможно с циклом и гнездом селектора () в зависимости от вашего варианта использования.

$sel: '';
@for $i from 1 through 10 {
    $sel: if($i == 1, "div", selector-nest($sel, "> div")) !global;

    #{$sel} {
        margin-top: 1px * $i;
    }
}