Kaip konvertuoti seną CSS į mažesnę
Mūsų ankstesniuose pranešimuose daugelis LESS pagrindų. Jei sekėte mūsų LESS seriją, manome, kad šiuo metu jau turite gerą idėją, kaip naudoti Kintamieji, Mišiniai ir Operacija mažiau.
Mes taip pat minėjome, kaip konvertuoti LESS į įprastą CSS, naudojant programą arba kompiliatorių. Tačiau, kaip mes darome priešingai; konvertuoti CSS į LESS? Na, šis patarimas yra skirtas jums.
Naudojant įrankį
Didėjant populiarumui CSS išankstinis apdorojimas, kai kurie nauji įrankiai ir programos, kuriomis siekiama palengvinti interneto dizainerio ar kūrėjo gyvenimą, pvz., šis įrankis: CSS2Less.
Šis įrankis leidžia mums reguliariai keisti CSS į LESS. Taigi, išbandykime. Turiu šias CSS taisykles iš mano seno failo, kuris bus konvertuojamas.
nav aukštis: 40px; plotis: 100%; fonas: # 000; apačioje: 2px kietas #fff; nav ul padding: 0; paraštė: 0 auto; nav li display: inline; plūdė: kairė; nav a color: #fff; ekranas: inline-block; plotis: 100px; teksto šešėlis: 1px 1px 0px # 000; nav li a border-right: 1px solid #fff; dėžutės dydžio: rėmelis; nav li: paskutinis vaikas sienos dešinėje: 0; nav a: hover, nav a: aktyvus fono spalva: #fff;
Čia yra rezultatas.
nav a: hover, nav a: aktyvus fono spalva: #fff; nav aukštis: 40px; plotis: 100%; fonas: # 000; apačioje: 2px kietas #fff; a spalva: #fff; ekranas: inline-block; plotis: 100px; teksto šešėlis: 1px 1px 0px # 000; ul įdėklas: 0; paraštė: 0 auto; li: paskutinis vaikas a right-right: 0; li ekranas: inline; plūdė: kairė; a right-right: 1px kietas #fff; dėžutės dydžio: rėmelis;
Kaip matome aukščiau, mūsų senas CSS dabar yra kaip LESS.
Apribojimas
Tačiau mes taip pat matome tam tikrus konversijos rezultatų apribojimus. Senojoje CSS mes turime kelias tas pačias spalvas, pvz., Šiose dviejose deklaracijose apačioje: 2px kietas #fff; ir dešinėje: 1px kietas #fff; abu sienos yra baltos. LESS mes galime iš tikrųjų išsaugoti šią pastovią vertę a Kintamas.
Ji taip pat nededa ir atskiria pseudo- * ir (ir) simboliu, pavyzdžiui, šiose taisyklėse li: paskutinis vaikas ir nav a: hover, nav a: aktyvus. Jie tiesiog lieka tokie, kokie jie yra, kur tokiu būdu mes galime supaprastinti taisykles;
li &: pirmasis vaikas a &: hover &: active
Išvada
Nepaisant šiuo metu vis dar taikomų apribojimų, šis įrankis gali padėti sutaupyti laiko, skirto CSS taisyklių išdėstymui. Likusias rankas reikia atlikti tik rankiniu būdu; galbūt tol, kol bus pasiekti anksčiau nurodyti apribojimai išspręsta.
