สร้างตัวเลือกแบบซ้อนโดยใช้ SCSS loop หรือไม่

ฉันสามารถใช้การวนซ้ำ (หรือการเรียกซ้ำ) ใน 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