Come convertire i vecchi CSS in MENO

Abbiamo coperto molte delle nozioni di base di LESS nei nostri post precedenti. Se hai seguito la nostra serie LESS, crediamo che a questo punto tu abbia già una buona idea su come usare il variabili, mixins e operazione in meno di.

Abbiamo anche menzionato come convertire LESS in CSS standard, con un'app o con un compilatore. Ma come facciamo il contrario? convertire i CSS in MENO? Bene, questo consiglio è per te.

Utilizzando uno strumento

Con crescente popolarità di Preprocessore CSS, alcuni nuovi strumenti e app che essenzialmente mirano a rendere più facile la vita del web designer o dello sviluppatore, come questo strumento: CSS2Less.

Questo strumento ci consente di convertire i normali CSS in LESS. Quindi proviamoci. Ho le seguenti regole CSS dal mio vecchio file da convertire.

 nav height: 40px; larghezza: 100%; sfondo: # 000; border-bottom: 2px solid #fff;  nav ul padding: 0; margine: 0 auto;  nav li display: inline; float: a sinistra;  nav a color: #fff; display: blocco in linea; larghezza: 100 px; text-shadow: 1px 1px 0px # 000;  nav li a border-right: 1px solid #fff; box-sizing: border-box;  nav li: last-child a border-right: 0;  nav a: hover, nav a: active background-color: #fff;  

Ecco il risultato.

 nav a: hover, nav a: active background-color: #fff;  nav height: 40px; larghezza: 100%; sfondo: # 000; border-bottom: 2px solid #fff; a color: #fff; display: blocco in linea; larghezza: 100 px; text-shadow: 1px 1px 0px # 000;  ul padding: 0; margine: 0 auto;  li: last-child a border-right: 0;  li display: inline; float: a sinistra; a border-right: 1px solid #fff; box-sizing: border-box;  

Come possiamo vedere sopra, il nostro vecchio CSS ora è annidato come in LESS.

Limitazione

Tuttavia, possiamo anche vedere alcune limitazioni nei risultati della conversione. Nel vecchio CSS, abbiamo molti colori uguali, come in queste due dichiarazioni border-bottom: 2px solid #fff; e border-right: 1px solid #fff; abbiamo entrambi i bordi in bianco. In LESS possiamo effettivamente memorizzare questo valore costante in a Variabile.

Inoltre non annida e separa il pseudo-* con un simbolo e commerciale (&), come nelle seguenti regole li: last-child e nav a: hover, nav a: active. Rimangono come sono, dove possiamo effettivamente semplificare le regole in questo modo;

 li &: first-child  a &: hover  &: attivo  

Conclusione

Nonostante i limiti attualmente esistenti, questo strumento può essere molto utile per risparmiare tempo per l'annidamento dei set di regole CSS. Abbiamo solo bisogno di fare il resto manualmente; forse fino a quando le limitazioni di cui sopra sono risoluto.