Sass and combined child selector

Question

I just discovered Sass, and I was so excited about it.

On my website, I am implementing a tree-based navigation menu, styled using a child combinator ( E > F ).

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

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

Answer 1

Without a combined child selector, you are likely to do something similar to this:

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

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

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

This compiles as follows:

 foo > bar > baz { color: red; } 

---

Or in sass:

 foo > bar > baz color: red 

Answer 2

For this one rule, you have no shorter way to do this. The child combinator is the same in CSS and Sass / SCSS, and there is no alternative to it.

However, if you had several rules:

 #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 can condense them with 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; } }