Kā konvertēt veco CSS uz mazāku
Mūsu iepriekšējos amatos mēs esam guvuši lielu daļu LESS pamatu. Ja jūs esat sekojis mūsu LESS sērijai, mēs uzskatām, ka šajā brīdī jums jau ir laba ideja par to, kā izmantot Mainīgie, Mixins un Darbība mazāk.
Mēs esam arī minējuši, kā pārvērst LESS par parasto CSS, izmantojot lietotni vai kompilatoru. Bet kā mēs darām pretējo; pārvērst CSS par LESS? Nu, šis padoms ir jums.
Izmantojot rīku
Ar pieaugošo popularitāti CSS priekšprocesors, daži jauni rīki un lietotnes, kuru mērķis ir atvieglot web dizainera vai izstrādātāja dzīvi, piemēram, šis rīks: CSS2Less.
Šis rīks ļauj mums konvertēt regulāru CSS par LESS. Tātad, pieņemsim to izmēģināt. Mani vecie faili ir jāpārveido šādi CSS noteikumi.
nav augstums: 40px; platums: 100%; fons: # 000; apakšējā daļa: 2px cietais #fff; nav ul polsterējums: 0; starpība: 0 auto; nav li displejs: inline; peldēt: pa kreisi; nav a krāsa: #fff; displejs: inline-bloks; platums: 100px; teksta ēna: 1px 1px 0px # 000; nav li a border-right: 1px solid #fff; kastes izmēri: robežkaste; nav li: pēdējais bērns robežas tiesības: 0; nav a: lidināties, nav a: aktīvs fona krāsa: #fff;
Šeit ir rezultāts.
nav a: lidināties, nav a: aktīvs fona krāsa: #fff; nav augstums: 40px; platums: 100%; fons: # 000; apakšējā daļa: 2px cietais #fff; a krāsa: #fff; displejs: inline-bloks; platums: 100px; teksta ēna: 1px 1px 0px # 000; ul polsterējums: 0; starpība: 0 auto; li: pēdējais bērns a right-right: 0; li displejs: inline; peldēt: pa kreisi; a right-right: 1px ciets #fff; kastes izmēri: robežkaste;
Kā redzams iepriekš, mūsu vecā CSS tagad ir ligzdota kā LESS.
Ierobežojums
Tomēr mēs varam redzēt arī dažus konversijas rezultātu ierobežojumus. Vecajā CSS mums ir vairākas tās pašas krāsas, piemēram, šajās divās deklarācijās apakšējā daļa: 2px cietais #fff; un labajā pusē: 1px cietais #fff; mums ir abas robežas baltā krāsā. LESS mēs varam paturēt šo nemainīgo vērtību a Mainīgs.
Tas arī neatrodas un neatdalās pseido-* ar simbolu (un), piemēram, sekojošos noteikumos li: pēdējais bērns un nav a: lidināties, nav a: aktīvs. Viņi vienkārši paliek kā tie ir, kur mēs varam vienkāršot noteikumus šādā veidā;
li &: pirmais bērns a &: hover &: aktīvs
Secinājums
Neskatoties uz šobrīd pastāvošajiem ierobežojumiem, šis rīks var palīdzēt ietaupīt laiku CSS noteikumu ielikšanai. Mums pārējie ir jādara tikai manuāli; iespējams, līdz iepriekš minētie ierobežojumi atrisināts.
