Sådan konverteres gamle CSS til mindre

Vi har dækket meget af det grundlæggende for mindre i vores tidligere indlæg. Hvis du har fulgt vores MINDER serie, mener vi, at du allerede har en god ide om, hvordan du bruger Variable, Mixins og Operation på mindre.

Vi har også nævnt, hvordan man konverterer LESS til almindeligt CSS, med en app eller med en compiler. Men hvordan gør vi det modsatte; at konvertere CSS til mindre? Nå, dette tip er til dig.

Brug af et værktøj

Med stigende popularitet af CSS preprocessor, nogle nye værktøjer og apps, der i det væsentlige sigter mod at gøre webdesigneren eller udviklerens liv lettere, såsom dette værktøj: CSS2Less.

Dette værktøj gør det muligt for os at konvertere regelmæssig CSS til mindre. Så lad os prøve det. Jeg har følgende CSS-regler fra min gamle fil, der skal konverteres.

 nav højde: 40px; bredde: 100%; baggrund: # 000; border-bottom: 2px solid #fff;  nav ul polstring: 0; margin: 0 auto;  nav li display: inline; flyde: venstre;  nav en farve: #fff; display: inline-block; bredde: 100px; tekstskygge: 1px 1px 0px # 000;  nav li a border-right: 1px solid #fff; box-dimensionering: border-box;  nav li: sidste-barn a grænse-højre: 0;  nav a: svinger, nav a: aktiv baggrundsfarve: #fff;  

Her er resultatet.

 nav a: hover, nav a: aktiv baggrundsfarve: #fff;  nav højde: 40px; bredde: 100%; baggrund: # 000; border-bottom: 2px solid #fff; en farve: #fff; display: inline-block; bredde: 100px; tekstskygge: 1px 1px 0px # 000;  ul polstring: 0; margin: 0 auto;  li: sidste barn a grænse-højre: 0;  li display: inline; flyde: venstre; en grænse-højre: 1px solid #fff; box-dimensionering: border-box;  

Som vi kan se ovenfor, er vores gamle CSS nu nestet som i mindre.

Begrænsning

Men vi kan også se nogle begrænsninger i konverteringsresultaterne. I den gamle CSS har vi flere samme farver, som i disse to erklæringer border-bottom: 2px solid #fff; og grænse-højre: 1px solid #fff; vi har begge grænser i hvidt. I LESS kan vi faktisk gemme denne konstante værdi i en Variabel.

Det gør også ikke rede og adskille pseudo * med et ampersand (&) symbol, som i de følgende regler li: sidste barn og nav a: svinger, nav a: aktiv. De forbliver bare som de er, hvor vi faktisk kan forenkle reglerne på denne måde;

 li &: første barn  en &: hover  &: aktiv  

Konklusion

På trods af de begrænsninger, som den stadig har, kan dette værktøj meget nyttigt med at spare tid for at neste CSS-regler. Vi skal kun gøre resten manuelt; muligvis indtil begrænsningerne ovenfor er løst.