Slik konverterer du gamle CSS til mindre

Vi har dekket mye av det grunnleggende for mindre i våre tidligere innlegg. Hvis du har fulgt vår LESS serie, tror vi at du allerede har en god ide om hvordan du bruker variabler, mixins og Operasjon I mindre.

Vi har også nevnt hvordan du konverterer LESS til vanlig CSS, med en app eller med en kompilator. Men hvordan gjør vi det motsatte; å konvertere CSS til mindre? Vel, dette tipset er for deg.

Bruke et verktøy

Med økende popularitet av CSS preprocessor, noen nye verktøy og programmer som i hovedsak tar sikte på å gjøre webdesigneren eller utviklerens liv enklere, for eksempel dette verktøyet: CSS2Less.

Dette verktøyet lar oss konvertere vanlig CSS til MINDRE. Så, la oss prøve. Jeg har følgende CSS-regler fra min gamle fil som skal konverteres.

 nav høyde: 40px; bredde: 100%; bakgrunn: # 000; border-bottom: 2px solid #fff;  nav ul polstring: 0; margin: 0 auto;  nav li display: inline; flyte: venstre;  nav en color: #fff; display: inline-block; bredde: 100px; tekstskygge: 1px 1px 0px # 000;  nav li a border-right: 1px solid #fff; box-sizing: border-box;  nav li: siste barn a grense-høyre: 0;  nav a: svever, nav a: aktiv bakgrunnsfarve: #fff;  

Her er resultatet.

 nav a: svever, nav a: aktiv bakgrunnsfarve: #fff;  nav høyde: 40px; bredde: 100%; bakgrunn: # 000; border-bottom: 2px solid #fff; en farge: #fff; display: inline-block; bredde: 100px; tekstskygge: 1px 1px 0px # 000;  ul polstring: 0; margin: 0 auto;  li: siste barn a grense-høyre: 0;  li display: inline; flyte: venstre; en grense-høyre: 1px solid #fff; box-sizing: border-box;  

Som vi kan se over, er vår gamle CSS nå nestet som i MINDRE.

begrensning

Men vi kan også se noen begrensninger i resultatene av konverteringen. I den gamle CSS har vi flere samme farger, som i disse to erklæringene border-bottom: 2px solid #fff; og grense høyre: 1px solid #fff; Vi har begge grenser i hvitt. I LESS kan vi faktisk lagre denne konstante verdien i en variabel.

Det nester og separerer heller ikke pseudo- * med et ampersand (&) symbol, som i de følgende reglene li: siste-barn og nav a: svever, nav a: aktiv. De forblir bare som de er, der vi faktisk kan forenkle reglene på denne måten;

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

Konklusjon

Til tross for de begrensninger det fremdeles har for øyeblikket, kan dette verktøyet være ganske nyttig når det gjelder å spare tid for nesting av CSS-regler. Vi trenger bare å gjøre resten manuelt; muligens inntil begrensningene ovenfor er løst.