Sass y selector de niños combinados

Question

Acabo de descubrir a Sass, y he estado muy emocionado al respecto.

Por cierto, en mi sitio web implemento un menú de navegación similar a un árbol, diseñado con el selector infantil combinado (E > F).

¿Hay alguna manera de reescribir este código en una sintaxis más simple (o mejor) en Sass?

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

Answer 1

Sin el selector combinado niño es probable que hacer algo similar a esto:

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

Si desea reproducir la misma sintaxis con >, que pudo para esto:

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

Esto compila a esto:

foo > bar > baz { 
    color: red; 
} 

---

O en Sass:

foo 
    > bar 
    > baz 
     color: red 

Answer 2

Por esa sola regla que tiene, no hay ningún camino más corto para hacerlo. El combinador de niños es el mismo en CSS y en Sass/SCSS y no hay alternativa.

Sin embargo, si usted tenía varias reglas 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; 
} 

Se podría condensar a uno de los siguientes:

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