Sass et sélecteur enfant combiné

Je viens de découvrir Sass et j’ai été tellement excité à ce sujet.

En passant, sur mon site Web, je mets en place un menu de navigation en forme d’arbre, conçu à l’aide du sélecteur enfant combiné ( E > F ).

Est-il possible de réécrire ce code dans une syntaxe plus simple (ou meilleure) sur Sass?

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

Sans le sélecteur enfant combiné, vous feriez probablement quelque chose de similaire à ceci:

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

Si vous souhaitez reproduire la même syntaxe avec > , vous pouvez le faire:

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

Cela comstack à ceci:

 foo > bar > baz { color: red; } 

Ou en sass:

 foo > bar > baz color: red 

Pour cette règle unique, il n’y a pas de moyen plus court de le faire. Le combinateur enfant est le même en CSS et en Sass / SCSS et il n’ya pas d’alternative.

Cependant, si vous aviez plusieurs règles comme ceci:

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

Vous pouvez les condenser à l’un des éléments suivants:

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