Ako previesť staré CSS na menej
V našich predchádzajúcich príspevkoch sme obsadili veľa základov pre LESS. Ak ste sledovali našu sériu LESS, veríme, že v tomto momente už máte dobrý nápad, ako používať premenné, Mixins a operácie za menej.
Spomenuli sme tiež, ako previesť LESS na bežný CSS, s aplikáciou alebo kompilátorom. Ale ako urobíme opak; previesť CSS na MNE? No, tento tip je pre vás.
Používanie nástroja
S rastúcou popularitou CSS preprocesor, niektoré nové nástroje a aplikácie, ktorých cieľom je v podstate zjednodušiť život dizajnérov alebo vývojárov, ako napríklad tento nástroj: CSS2Less.
Tento nástroj nám umožňuje konvertovať pravidelné CSS na LESS. Tak skúsme to skúsiť. Mám nasledujúce pravidlá CSS z môjho starého súboru, ktorý sa má previesť.
nav výška: 40px; šírka: 100%; pozadie: # 000; border-bottom: 2px solid #fff; nav ul padding: 0; marža: 0 auto; nav li zobrazenie: inline; plavák: vľavo; nav a farba: #fff; zobrazenie: inline-block; šírka: 100px; text-tieň: 1px 1px 0px # 000; nav li a border-right: 1px pevná #fff; box-sizing: border-box; nav li: posledné-dieťa a border-right: 0; navigácia: vznášať, nav: aktívna farba pozadia: #fff;
Tu je výsledok.
nav a: vznášať, nav: aktívna farba pozadia: #fff; nav výška: 40px; šírka: 100%; pozadie: # 000; border-bottom: 2px solid #fff; a farba: #fff; zobrazenie: inline-block; šírka: 100px; text-tieň: 1px 1px 0px # 000; ul padding: 0; marža: 0 auto; li: posledné-dieťa a border-right: 0; li zobrazenie: inline; plavák: vľavo; border-right: 1px solid #fff; box-sizing: border-box;
Ako môžeme vidieť vyššie, náš starý CSS je teraz vnorený ako v prípade LESS.
obmedzenia
Môžeme však vidieť aj určité obmedzenia výsledkov konverzie. V starom CSS máme niekoľko rovnakých farieb, napríklad v týchto dvoch vyhláseniach border-bottom: 2px solid #fff; a border-right: 1px solid #fff; máme obidve hranice v bielom. V LESS môžeme skutočne uložiť túto konštantnú hodnotu v a premenlivý.
Taktiež nezhromažďuje a neoddeľuje pseudo * s symbolom ampersand (&), ako napríklad v nasledujúcich pravidlách li: last-child a navigačný a navigačný: aktívny. Zostávajú tak, ako sú, kde môžeme skutočne zjednodušiť pravidlá;
li &: prvé-dieťa a &: hover &: aktívne
záver
Napriek obmedzeniam, ktoré má v súčasnosti stále, tento nástroj môže pomôcť pri šetrení času na vloženie množín pravidiel CSS. Potrebujeme robiť len ručne; možno až do vyššie uvedených obmedzení vyriešený.
