Sass e seletor de criança combinado

Acabei de descobrir Sass e estou muito empolgado com isso.

No meu site, implemento um menu de navegação semelhante a uma árvore, estilizado usando o combinador filho ( E > F).

Existe alguma maneira de reescrever esse código com uma sintaxe mais simples (ou melhor) no Sass?

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

Sem o seletor filho combinado, você provavelmente faria algo semelhante a isto:

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

Se você deseja reproduzir a mesma sintaxe com >, poderá:

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

Isso compila para isso:

foo > bar > baz {
  color: red;
}

Ou em sass:

foo
  > bar
    > baz
      color: red

Para essa regra única que você possui, não existe uma maneira mais curta de fazer isso. O combinador filho é o mesmo no CSS e no Sass / SCSS e não há alternativa a ele.

No entanto, se você tivesse várias regras como esta:

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

Você pode condensá-los para um dos seguintes:

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