Jak převést staré CSS na méně
V našich předchozích příspěvcích jsme pokryli většinu základů pro LESS. Pokud jste sledovali naši řadu LESS, věříme, že v tomto okamžiku již máte dobrou představu o tom, jak používat Proměnné, Směsi a Úkon méně.
Také jsme zmínili, jak převést LESS do běžného CSS, s aplikací nebo s kompilátorem. Jak ale děláme opak; převést CSS na LESS? Tento tip je pro vás.
Použití nástroje
S rostoucí popularitou CSS preprocesor, některé nové nástroje a aplikace, které se v podstatě snaží usnadnit život weboví designérům nebo vývojářům, například tento nástroj: CSS2Less.
Tento nástroj nám umožňuje převést pravidelné CSS na LESS. Zkusme to. Mám převést následující pravidla CSS z mého starého souboru.
nav výška: 40px; šířka: 100%; pozadí: # 000; border-bottom: 2px pevné #fff; nav ul padding: 0; okraj: 0 auto; nav li zobrazit: inline; plavat vlevo; nav a color: #fff; displej: inline-block; šířka: 100px; text-shadow: 1px 1px 0px # 000; nav li a border-right: 1px pevné #fff; velikost krabice: rámeček; nav li: last-child a border-right: 0; nav a: hover, nav a: active background-color: #fff;
Zde je výsledek.
nav a: hover, nav a: active background-color: #fff; nav výška: 40px; šířka: 100%; pozadí: # 000; border-bottom: 2px pevné #fff; a color: #fff; displej: inline-block; šířka: 100px; text-shadow: 1px 1px 0px # 000; ul padding: 0; okraj: 0 auto; li: last-child a border-right: 0; li zobrazit: inline; plavat vlevo; a border-right: 1px pevné #fff; velikost krabice: rámeček;
Jak je vidět výše, naše staré CSS je nyní vnořené jako v LESS.
Omezení
Ve výsledcích konverze však můžeme vidět i určitá omezení. Ve starých CSS máme několik stejných barev, například v těchto dvou prohlášeních border-bottom: 2px pevné #fff; a border-right: 1px pevné #fff; máme obě hranice v bílém. V LESS můžeme tuto konstantní hodnotu skutečně uložit do a Proměnná.
To také nestíhá a oddělit pseudo * se znakem ampersand (&), jako například v následujících pravidlech li: poslední dítě a nav a: hover, nav a: active. Zůstávají tak, jak jsou, kde můžeme takto pravidla zjednodušit;
li &: first-child a &: hover &: active
Závěr
I přes omezení, která má v současné době, tento nástroj může docela pomoci při úspoře našeho času pro vnoření CSS pravidel. Zbytek musíme udělat pouze ručně; možná až do výše uvedených omezení vyřešen.
