Sass and combined child selector

Question

I've just discovered Sass, and I've been so excited about it.

In my website I implement a tree-like navigation menu, styled using the child combinator (E > F).

Is there any way to rewrite this code with a simpler (or better) syntax in Sass?

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

Answer 1

Without the combined child selector you would probably do something similar to this:

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

If you want to reproduce the same syntax with >, you could to this:

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

This compiles to this:

foo > bar > baz {   color: red; } 

---

Or in sass:

foo   > bar     > baz       color: red 

Answer 2

For that single rule you have, there isn't any shorter way to do it. The child combinator is the same in CSS and in Sass/SCSS and there's no alternative to it.

However, if you had multiple rules like this:

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

You could condense them to one of the following:

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