Så här konverterar du gammal CSS till mindre
Vi har täckt mycket av grunderna för MINDRE i våra tidigare inlägg. Om du har följt vår LESS-serie tror vi att du redan har en bra idé om hur du använder variabler, Mixins och Drift på mindre än.
Vi har också nämnt hur man konverterar LESS till vanlig CSS, med en app eller med en kompilator. Men hur gör vi motsatsen; att konvertera CSS till mindre? Tja, det här tipset är för dig.
Använda ett verktyg
Med ökande popularitet av CSS preprocessor, några nya verktyg och appar som i huvudsak syftar till att göra webbdesignerns eller utvecklarens liv enklare, till exempel det här verktyget: CSS2Less.
Med det här verktyget kan vi konvertera vanlig CSS till LESS. Så, låt oss prova. Jag har följande CSS-regler från min gamla fil som ska konverteras.
nav höjd: 40px; bredd: 100%; bakgrund: # 000; border-bottom: 2px solid #fff; nav ul vaddering: 0; marginal: 0 auto; nav li display: inline; flyta till vänster; nav a color: #fff; display: inline-block; bredd: 100px; textskugga: 1px 1px 0px # 000; nav li a border-right: 1px solid #fff; box-limning: border-box; nav li: sista barnet a gränsen-höger: 0; nav a: sväva, nav a: aktiv bakgrundsfärg: #fff;
Här är resultatet.
nav a: svävar, nav a: aktiv bakgrundsfärg: #fff; nav höjd: 40px; bredd: 100%; bakgrund: # 000; border-bottom: 2px solid #fff; en färg: #fff; display: inline-block; bredd: 100px; textskugga: 1px 1px 0px # 000; ul vaddering: 0; marginal: 0 auto; li: sista barnet a gränsen-höger: 0; li display: inline; flyta till vänster; en gräns-höger: 1px solid #fff; box-limning: border-box;
Som vi kan se ovan är vår gamla CSS nu nestad som i MINDRE.
Begränsning
Men vi kan också se några begränsningar i resultaten av konverteringen. I den gamla CSS har vi flera samma färger, som i dessa två deklarationer border-bottom: 2px solid #fff; och gränsen-höger: 1px solid #fff; Vi har båda gränserna i vitt. I MINDRE kan vi faktiskt lagra det här konstanta värdet i en Variabel.
Det nestar och skiljer inte heller pseudo-* med en ampersand (&) symbol, som i följande regler li: sista barn och nav a: sväva, nav a: aktiv. De förblir precis som de är, där vi faktiskt kan förenkla reglerna på så sätt.
li &: första barnet en &: svävar &: aktiv
Slutsats
Trots de begränsningar som den fortfarande har, kan det här verktyget vara till stor nytta när det gäller att spara tid för att bygga CSS-regler. Vi behöver bara göra resten manuellt; eventuellt tills begränsningarna ovan är löst.
