Sass та комбінований добірчик дітей

Я щойно виявив Сасса, і мене так схвилював.

На своєму веб-сайті я реалізую деревоподібне навігаційне меню, створене за допомогою дочірнього комбінатора ( 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

Для того єдиного правила, яке ви маєте, немає жодного коротшого способу це зробити. Дочірній комбінатор однаковий як у 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; }
}