Hoe oude CSS naar MINDER te converteren

We hebben veel van de basisprincipes voor LESS behandeld in onze vorige berichten. Als je onze LESS-serie hebt gevolgd, zijn we van mening dat je op dit moment al een goed idee hebt over het gebruik van de Variabelen, mixins en Operatie minder.

We hebben ook gezegd hoe je LESS converteert naar reguliere CSS, met een app of met een compiler. Maar hoe doen we het tegenovergestelde; CSS omzetten in MINDER? Nou, deze tip is voor jou.

Een tool gebruiken

Met toenemende populariteit van CSS preprocessor, enkele nieuwe tools en apps die er in essentie op zijn gericht om het leven van webontwerpers of ontwikkelaars gemakkelijker te maken, zoals deze tool: CSS2Less.

Met deze tool kunnen we reguliere CSS naar LESS omzetten. Laten we het eens proberen. Ik heb de volgende CSS-regels uit mijn oude bestand dat moet worden geconverteerd.

 nav height: 40px; breedte: 100%; achtergrond: # 000; border-bottom: 2px solid #fff;  nav ul opvulling: 0; marge: 0 auto;  nav li display: inline; zweven: links;  nav a color: #fff; weergave: inline-block; breedte: 100 px; tekstschaduw: 1px 1px 0px # 000;  nav li a border-right: 1px solid #fff; box-sizing: border-box;  nav li: last-child a border-right: 0;  nav a: hover, nav a: active background-color: #fff;  

Dit is het resultaat.

 nav a: hover, nav a: active background-colour: #fff;  nav height: 40px; breedte: 100%; achtergrond: # 000; border-bottom: 2px solid #fff; een color: #fff; weergave: inline-block; breedte: 100 px; tekstschaduw: 1px 1px 0px # 000;  ul opvulling: 0; marge: 0 auto;  li: last-child a border-right: 0;  li display: inline; zweven: links; a border-right: 1px solid #fff; box-sizing: border-box;  

Zoals we hierboven kunnen zien, is onze oude CSS nu genest zoals in MINDER.

Beperking

We kunnen echter ook enkele beperkingen in de resultaten van de conversie zien. In de oude CSS hebben we verschillende dezelfde kleuren, zoals in deze twee verklaringen border-bottom: 2px solid #fff; en border-right: 1px solid #fff; we hebben beide grenzen in het wit. In LESS kunnen we deze constante waarde eigenlijk opslaan in a veranderlijk.

Het nest ook niet en scheidt het pseudo-* met een ampersand (&) -symbool, zoals in de volgende regels li: last-kind en nav a: hover, nav a: active. Ze blijven gewoon zoals ze zijn, waar we de regelsets op deze manier kunnen vereenvoudigen;

 li &: first-child  a &: hover  &: active  

Conclusie

Ondanks de beperkingen die het op dit moment nog steeds heeft, kan deze tool heel nuttig zijn om tijd te besparen voor het nesten van CSS-regelsets. We hoeven de rest alleen handmatig te doen; mogelijk totdat de bovenstaande beperkingen zijn opgelost.