Kako pretvoriti stare CSS v manj

V prejšnjih objavah smo pokrili večino osnov za LESS. Če ste spremljali našo serijo LESS, menimo, da že imate dobro predstavo o tem, kako uporabljati Spremenljivke, Mixins in Operacija v manj.

Omenili smo tudi, kako pretvoriti LESS v redni CSS, z aplikacijo ali s prevajalnikom. Toda, kako naredimo nasprotno; pretvoriti CSS v MANJ? No, ta tip je za vas.

Uporaba orodja

Z naraščajočo priljubljenost Preprocesor CSS, nekaj novih orodij in aplikacij, katerih namen je olajšati življenje oblikovalca ali razvijalca, kot je to orodje: CSS2Less.

To orodje nam omogoča pretvorbo običajnega CSS-ja v LESS. Torej, poskusimo. Iz moje stare datoteke, ki jo je treba pretvoriti, imam naslednja pravila CSS.

 nav višina: 40px; širina: 100%; ozadje: # 000; obroba spodaj: 2px trdna #fff;  nav ul padding: 0; margin: 0 auto;  nav li display: inline; plovec: levo;  nav a barva: #fff; prikaz: inline-block; širina: 100px; besedilna senca: 1px 1px 0px # 000;  nav li a border-right: 1px solid #fff; velikost škatle: obrobno polje;  nav li: zadnji otrok border-right: 0;  nav a: hover, nav a: aktivno ozadje-barva: #fff;  

Tukaj je rezultat.

 nav a: hover, nav a: aktivno ozadje-barva: #fff;  nav višina: 40px; širina: 100%; ozadje: # 000; obroba spodaj: 2px trdna #fff; a barva: #fff; prikaz: inline-block; širina: 100px; besedilna senca: 1px 1px 0px # 000;  ul padding: 0; margin: 0 auto;  li: zadnji otrok a border-right: 0;  li prikaz: inline; plovec: levo; a border-right: 1px solid #fff; velikost škatle: obrobno polje;  

Kot lahko vidimo zgoraj, je naš stari CSS zdaj ugnezden kot v LESS.

Omejitev

Vendar pa lahko vidimo tudi nekatere omejitve v rezultatih konverzije. V starem CSS-ju imamo več enakih barv, kot na primer v teh dveh deklaracijah obroba spodaj: 2px trdna #fff; in border-right: 1px solid #fff; imamo obe meji v beli barvi. V LESS lahko dejansko shranimo to konstantno vrednost v a Spremenljivka.

Prav tako ne gnezdi in ločuje psevdo- * s simbolom (&), kot je na primer v naslednjih pravilih li: zadnji otrok in nav a: hover, nav a: aktivno. Samo ostanejo takšne, kot so, kjer lahko na ta način dejansko poenostavimo pravila;

 li &: prvi otrok  a &: hover  &: aktivno  

Zaključek

Kljub omejitvam, ki jih trenutno ima, lahko to orodje zelo pomaga pri varčevanju s časom za gnezdenje nabor pravil CSS. Ostalo moramo le ročno; po možnosti do zgoraj navedenih omejitev rešiti.