Sass e selettore figlio combinato

125

Ho appena scoperto Sass e ne sono così entusiasta.

Nel mio sito web implemento un menu di navigazione ad albero, disegnato usando il combinatore figlio ( E > F).

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

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

css css-selectors sass

— frarees
fonte

Penso che "OP più semplice / migliore" significhi "in un modo che utilizza gli spazi bianchi per indicare la gerarchia"

— jsejcksn,

Risposte:

222

Senza il selettore figlio combinato probabilmente faresti qualcosa di simile a questo:

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

Se si desidera riprodurre la stessa sintassi con >, è possibile:

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

Questo si compila a questo:

foo > bar > baz {
  color: red;
}

O in sass:

foo
  > bar
    > baz
      color: red

— Arnaud Le Blanc
fonte

Questo lo allungherà, non è vero?

— BoltClock

Pensavo che questo fosse ciò che voleva OP

— Arnaud Le Blanc,

bene grazie. btw, come affermato da BoltClock, è più lungo (e in qualche modo più brutto per me). Sembra che dovrò rimanere con il mio vecchio stile.

— frarees,

devi definire "sintassi più piacevole";)

— Arnaud Le Blanc

Per quella singola regola che hai, non esiste un modo più breve per farlo. Il combinatore figlio è lo stesso nei CSS e in Sass / SCSS e non c'è alternativa ad esso.

Tuttavia, se avessi più regole come questa:

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

Potresti condensarli in uno dei seguenti modi:

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

— BoltClock
fonte

Quindi non c'è trasformazione per il selettore figlio combinato ... forse qualche alternativa ad esso?

— frarees,