Создавать вложенные селекторы с помощью цикла SCSS?

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

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

sass
person JPM    schedule 27.09.2018    source источник

Ответы (1)


arrow_upward
3
arrow_downward

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

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

    #{$sel} {
        margin-top: 1px * $i;
    }
}
person anderssonola    schedule 27.09.2018