Kako pretvoriti stari CSS manje
Većinu osnove za LESS pokrili smo u prethodnim postovima. Ako ste pratili našu LESS seriju, vjerujemo da u ovom trenutku već imate dobru ideju o tome kako koristiti Varijable, Mixins i operacija u manje.
Također smo spomenuli kako pretvoriti LESS u regularni CSS, s aplikacijom ili s kompilatorom. Ali, kako ćemo učiniti suprotno; pretvoriti CSS u MANJE? Ovaj savjet je za tebe.
Korištenje alata
Sa sve većom popularnošću CSS pretprocesor, neke nove alate i aplikacije koji u osnovi nastoje olakšati život web dizajnera ili razvojnog programera, kao što je ovaj alat: CSS2Less.
Ovaj alat omogućuje nam pretvaranje regularnog CSS-a u MANJE. Dakle, pokušajmo. Imam sljedeće CSS pravila iz moje stare datoteke za pretvorbu.
nav visina: 40px; širina: 100%; pozadina: # 000; rubno-dno: 2px čvrsto #fff; nav ul punjenje: 0; margin: 0 auto; nav li display: inline; plutajući: lijevo; nav a boja: #fff; prikaz: inline-blok; širina: 100px; tekst-sjena: 1px 1px 0px # 000; nav li border-right: 1px solid #fff; kutija-dimenzioniranje: border-box; nav li: posljednje dijete border-right: 0; nav a: hover, nav a: aktivno pozadinska boja: #fff;
Evo rezultata.
nav a: hover, nav a: aktivno pozadinska boja: #fff; Nav visina: 40px; širina: 100%; pozadina: # 000; rubno-dno: 2px čvrsto #fff; a boja: #fff; prikaz: inline-blok; širina: 100px; tekst-sjena: 1px 1px 0px # 000; ul padding: 0; margin: 0 auto; li: posljednje dijete a border-right: 0; li prikaz: inline; plutajući: lijevo; border-right: 1px solid #fff; kutija-dimenzioniranje: border-box;
Kao što možemo vidjeti gore, naš stari CSS je sada ugnježen kao u LESS.
Ograničenje
Međutim, možemo vidjeti i neka ograničenja u rezultatima pretvorbe. U starom CSS-u imamo nekoliko istih boja, kao što je to u ove dvije deklaracije rubno-dno: 2px čvrsto #fff; i border-right: 1px solid #fff; imamo obje granice u bijelom. U LESS-u zapravo možemo pohraniti ovu konstantnu vrijednost u a varijabla.
Također se ne gnijezdi i razdvaja pseudo-* s simbolom & (&), kao što je u sljedećim pravilima Li: last dijete i nav a: hover, nav a: aktivan. Oni ostaju samo onakvi kakvi jesu, gdje zapravo možemo pojednostaviti pravila na ovaj način;
li &: prvo dijete a &: hover &: aktivno
Zaključak
Unatoč ograničenjima koja trenutno ima, ovaj alat može biti od velike pomoći u uštedama našeg vremena za gniježđenje CSS skupova pravila. Ostalo je ostalo samo ručno; po mogućnosti sve do gore navedenih ograničenja riješen.
