Sass และตัวเลือกเด็กรวม

ฉันเพิ่งค้นพบ Sass และฉันก็ตื่นเต้นกับมันมาก

ในเว็บไซต์ของฉันฉันใช้เมนูการนำทางที่เหมือนต้นไม้ซึ่งมีสไตล์โดยใช้ลูก combinator ( E > F)

มีวิธีใดในการเขียนโค้ดนี้ใหม่ด้วยไวยากรณ์ที่ง่ายกว่า (หรือดีกว่า) ใน Sass หรือไม่?

#foo > ul > li > ul > li > a {
  color: red;
}

หากไม่มีตัวเลือกลูกที่รวมกันคุณอาจทำสิ่งที่คล้ายกันนี้:

foo {
  bar {
    baz {
      color: red;
    }
  }
}

หากคุณต้องการสร้างไวยากรณ์ซ้ำด้วย>คุณสามารถทำได้ดังนี้:

foo {
  > bar {
    > baz {
      color: red;
    }
  }
}

สิ่งนี้รวบรวมสิ่งนี้:

foo > bar > baz {
  color: red;
}

หรือใน sass:

foo
  > bar
    > baz
      color: red

สำหรับกฎข้อเดียวที่คุณมีไม่มีวิธีใดที่สั้นกว่านี้ Combinator ลูกเหมือนกันใน CSS และใน Sass / SCSS และไม่มีทางเลือกอื่น

อย่างไรก็ตามหากคุณมีกฎหลายข้อเช่นนี้:

#foo > ul > li > ul > li > a:nth-child(3n+1) {
    color: red;
}

#foo > ul > li > ul > li > a:nth-child(3n+2) {
    color: green;
}

#foo > ul > li > ul > li > a:nth-child(3n+3) {
    color: blue;
}

คุณสามารถย่อให้เป็นหนึ่งในสิ่งต่อไปนี้:

/* Sass */
#foo > ul > li > ul > li
    > a:nth-child(3n+1)
        color: red
    > a:nth-child(3n+2)
        color: green
    > a:nth-child(3n+3)
        color: blue

/* SCSS */
#foo > ul > li > ul > li {
    > a:nth-child(3n+1) { color: red; }
    > a:nth-child(3n+2) { color: green; }
    > a:nth-child(3n+3) { color: blue; }
}