Selettore selettore Sass e combinati

Question

Ho appena scoperto Sass, e ne sono stato così entusiasta.

Tra l'altro, nel mio sito ho implementare un menu di navigazione ad albero, in stile con il selettore bambino combinato (E > F).

C'è un modo per riscrivere questo codice in una sintassi più semplice (o migliore) su Sass?

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

Answer 1

Senza il selettore bambino combinato si sarebbe probabilmente fare qualcosa di simile a questo:

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

Se si desidera riprodurre la stessa sintassi con >, si potrebbe a questo:

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

Compila questo:

foo > bar > baz { 
    color: red; 
} 

---

O in sass:

foo 
    > bar 
    > baz 
     color: red 

Answer 2

Per questo unico insieme di norme che hai, non c'è alcun modo più breve per farlo. Il combinatore di bambini è lo stesso in CSS e in Sass/SCSS e non c'è alternativa ad esso.

Tuttavia, se si ha più regole come questo:

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

Si potrebbe condensare loro a uno dei seguenti:

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