Sass dan pemilih anak gabungan

Saya baru saja menemukan Sass, dan saya sangat bersemangat tentangnya.

Di situs web saya, saya menerapkan menu navigasi seperti pohon, yang ditata menggunakan kombinator anak ( E > F).

Apakah ada cara untuk menulis ulang kode ini dengan sintaks yang lebih sederhana (atau lebih baik) di Sass?

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

Tanpa pemilih anak gabungan, Anda mungkin akan melakukan sesuatu yang serupa dengan ini:

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

Jika Anda ingin mereproduksi sintaks yang sama dengan >, Anda dapat melakukannya:

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

Ini mengkompilasi menjadi ini:

foo > bar > baz {
  color: red;
}

Atau di sass:

foo
  > bar
    > baz
      color: red

Untuk aturan tunggal yang Anda miliki, tidak ada cara yang lebih singkat untuk melakukannya. Kombinator anak sama di CSS dan di Sass / SCSS dan tidak ada alternatif lain untuk itu.

Namun, jika Anda memiliki beberapa aturan seperti ini:

#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;
}

Anda dapat meringkasnya menjadi salah satu dari berikut ini:

/* 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; }
}