Sass ve kombine çocuk seçici

Sass'ı yeni keşfettim ve bu konuda çok heyecanlandım.

Web sitemde, çocuk birleştirici ( E > F) kullanılarak şekillendirilmiş ağaç benzeri bir gezinme menüsü uyguluyorum .

Bu kodu Sass'ta daha basit (veya daha iyi) bir sözdizimi ile yeniden yazmanın bir yolu var mı ?

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

Birleşik çocuk seçici olmadan muhtemelen buna benzer bir şey yapardınız:

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

İle aynı sözdizimini yeniden üretmek istiyorsanız >, bunu yapabilirsiniz:

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

Bu şuna derler:

foo > bar > baz {
  color: red;
}

Veya sass içinde:

foo
  > bar
    > baz
      color: red

Sahip olduğunuz tek kural için, bunu yapmanın daha kısa bir yolu yoktur. Alt birleştirici, CSS ve Sass / SCSS'de aynıdır ve bunun alternatifi yoktur.

Ancak, bunun gibi birden fazla kuralınız varsa:

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

Bunları aşağıdakilerden birine yoğunlaştırabilirsiniz:

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