Menghasilkan penyeleksi bersarang menggunakan loop SCSS?

Bisakah saya menggunakan loop (atau rekursi) di SCSS untuk menghasilkan sesuatu seperti ini?

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 sumber

Jawaban (1)


arrow_upward
3
arrow_downward

Mungkin dengan loop dan selector-nest() tergantung pada kasus penggunaan Anda.

$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