Kuidas teisendada vana CSS-i LESS'iks
Oleme oma varasematel ametikohtadel katnud suure osa LESSi põhitõedest. Kui olete jälginud meie LESS-seeriat, usume, et sellel hetkel on teil juba hea idee selle kohta, kuidas seda kasutada Muutujad, Segud ja Toimimine LESSis.
Samuti oleme maininud, kuidas muuta LESS tavaliseks CSS-ks rakendusega või kompilaatoriga. Aga kuidas me teeme vastupidist; teisendada CSS LESS'iks? Noh, see ots on sinu jaoks.
Tööriista kasutamine
Suureneva populaarsusega CSS eelprotsessor, mõned uued tööriistad ja rakendused, mille eesmärk on lihtsustada veebidisaineri või arendaja elu, näiteks see tööriist: CSS2Less.
See tööriist võimaldab meil tavapärast CSS-i muuta LESSiks. Niisiis, proovime seda proovida. Mul on mu vana failist järgmised CSS-reeglid, mida tuleb teisendada.
nav kõrgus: 40 px; laius: 100%; taust: # 000; alumine serv: 2px tahke #fff; nav ul padding: 0; marginaal: 0 auto; nav li kuva: inline; float: vasakule; nav a color: #fff; kuva: inline-block; laius: 100 px; teksti-vari: 1px 1px 0px # 000; nav li a border-right: 1px tahke #fff; kastide suurus: piirikast; nav li: viimane laps a right-right: 0; nav a: hover, nav a: aktiivne taustavärv: #fff;
Siin on tulemus.
nav a: hover, nav a: aktiivne taustavärv: #fff; nav kõrgus: 40 px; laius: 100%; taust: # 000; alumine serv: 2px tahke #fff; a värv: #fff; kuva: inline-block; laius: 100 px; teksti-vari: 1px 1px 0px # 000; ul polster: 0; marginaal: 0 auto; li: last-last a right-right: 0; li kuva: inline; float: vasakule; a piiri-parem: 1tx tahke #fff; kastide suurus: piirikast;
Nagu eespool näeme, on meie vana CSS nüüd pesas nagu LESS.
Piirangud
Siiski näeme konversiooni tulemustes ka mõningaid piiranguid. Vanas CSS-is on meil mitu värvi, nagu need kaks deklaratsiooni alumine serv: 2px tahke #fff; ja paremal pool: 1tx tahke #fff; meil on mõlemad piirid valge. LESSis saab seda konstantset väärtust tegelikult a Muutuv.
See ei ka pesitse ega eralda pseudo- * ja (ja) sümboliga, näiteks järgmistes reeglites li: viimane laps ja nav a: hover, nav a: aktiivne. Nad jäävad lihtsalt nii, nagu nad on, kus saame reegleid selliselt lihtsustada;
li &: esimene laps a &: hover &: aktiivne
Järeldus
Hoolimata praegu kehtivatest piirangutest võib see tööriist üsna kasulikuks hoida meie aega CSS-reeglite pesitsemiseks. Me peame ainult ülejäänud käsitsi tegema; võimalik, kuni ülaltoodud piirangud on lahendatud.
