MENO CSS Sintassi utile per Modernizr

Question

Di solito io uso Modernizr per scoprire le capacità del browser. Stesso tempo, io uso MENO CSS a fare il mio css più leggibile e gestibile. stile comune con meno regole nidificate simile a questo:

#header {
  color: black;

  .logo {
    width: 300px;
    color: rgba(255,255,255,.6);
    &:hover { text-decoration: none }
  }
}

Quindi, se uso lo stile Modernizr fall-back, aggiungo questo testo per il blocco precedente:

.no-js #header,
.no-rgba #header {
  .logo {
    color: white;
  }
}

Quindi, sembra che ho due rami di codice, e ogni volta che ho bisogno di controllare un altro aspetto compatibilità del numero di rami crescerà. Questo codice è meno gestibile, perché si deve trovare tutti gli stili applicati ad ogni elemento, e il beneficio si ottiene utilizzando classi nidificate scompare.

La domanda: c'è un modo in sintassi MENO includere tali caduta di valore e non di partenza un nuovo codice-diramazione per .no-js e classi di altri .no-SMTH

?

Answer 1

È ora possibile utilizzare l'operatore & per affrontare questo problema molto. La seguente sintassi dovrebbe funzionare in less.js , lessphp e errati privi di punti :

b {
  a & {
    color: red;
  }
}

Questa è compilato in:

a b { color:red; }

Quindi, per l'esempio è possibile utilizzare la seguente sintassi:

#header {
    .logo { color:white; }
    .no-rgba &,
    .no-js & {
        .logo { color:green; }
    }
}

... che sarebbe essere compilato in:

#header .logo {
    color:white;
}
.no-rgba #header .logo,
.no-js #header .logo {
    color:green;
}

Answer 2

Il modo migliore che posso pensare di avvicinarsi è di avere solo un file .less separato per questi fallback. Penso che questo finirebbe molto più facile da gestire in modo non c'è bisogno di beccare in giro per .no-rgba in un sacco di posti.

.no-rgba {
  #header {}
  #footer {}
}

.no-js {
  #header {}
  #footer {}
}

ho provato a venire con una soluzione come si voleva, ma non ho avuto fortuna.