MINDER är ett fantastiskt litet verktyg som utökar CSS med tillägg av variabler, mixins, operationer och kapslade regler. Vad det här betyder är att du kan skriva snabbare kod mycket snabbt. Och med den senaste tidens uppkomst av komplexa CSS3-egenskaper har vi några skarpa exempel på kod som definitivt skulle kunna förenklas lite.
Idag tar vi en titt på hur man använder den senaste JavaScript-implementeringen av MINDRE för att förenkla långvarig CSS3-uppställning. En av de viktigaste funktionerna som vi kommer att titta på det jag inte sett har diskuterats någon annanstans är hur man hanterar flera variabler i mixins. Det är ganska enkelt men kan vara förvirrande om du aldrig har provat det.
Alla kan använda LESS.js
När jag först tittade på MINDER verkade det som ett hemskt arbete. Det var alla dessa konstiga sammanställningssteg och Ruby-skript som i slutändan kändes som att de skulle lägga tid till min arbetsflöde istället för att minska den.
Lyckligtvis inser någon att hela processen kan vara mycket enklare med JavaScript. Så nu är implementering LESS lika enkelt som att klistra in två linjer kod i din HTML och allt kompilerar automatiskt direkt i webbläsaren! Låt oss se hur det här fungerar.
Komma igång
För att försäkra dig om att din LESS-kod compilerar korrekt, släng den följande koden i huvudet på din HTML.
Observera att den typiska rel = stylesheet? har blivit rel =? stylesheet / mindre? och att vi har länkat till en Google-värdversion av LESS.js.
Nästa steg är att skapa en style.less fil. Detta kan namnges allt du vill ha, bara vara säker på att den har .less-förlängningen istället för .css som du är van vid.
Deklarera variabler
En av mina favoritfunktioner i LESS är överlägset att du kan använda variabler precis som du skulle i de flesta större programmeringsspråk. Det gör det extremt enkelt att ställa in globala stilar som kan ändras på en enda plats istället för att sortera genom din kod för att hitta varje förekomst av den stilen.
För att se hur detta gäller på en praktisk nivå, låt oss ange ett par färgvariabler. Föreställ dig att vår webbsida kommer att ha en primär och en sekundär färg som används upprepade gånger under hela designen. I stället för att komma ihåg färgkoden varje gång kan vi helt enkelt ställa in dessa för variabler.
För att ställa in en variabel i MINDER, använd @ -symbolen:
Det är allt! Nu när vi vill använda dessa färger i vår design använder vi helt enkelt samma CSS som vi alltid gör men lägger in det variabla namnet istället för färgkoden.
Nu när vi ändrar färgen i den variabla deklarationen kommer ändringen automatiskt att tillämpas över resten av koden var som helst variabeln heter. Detta kan definitivt spara dig mycket tid när du börjar anpassa dina mönster.
Operationer
Precis som med JavaScript och något annat programmeringsspråk som du brukar, tillåter LESS dig att utföra operationer på variabler. Detta kan spara mycket mental matematik på lång sikt.
Som ett förenklat exempel, säg att du ville skapa en låda som var dubbelt så bred som den var lång. Du kan deklarera höjden i en variabel och sedan ställa in en annan variabel som är dubbelt så många.
Senare i din kod skulle du använda dessa variabler för att ställa in höjd och bredd på din ruta. Om du skulle gå tillbaka och ändra boxHeight till 400px skulle boxWidth automatiskt ställas in till 800px;
Mixins
Här kommer CSS3 att spela. Till att börja med, låt oss titta på grundsyntaxen för en slumpmässig CSS3-egenskap, säg gränsen.
Som du kan se är det nuvarande sättet att se till att detta fungerar över det största antalet webbläsare inkludera alla olika webbläsarspecifika versioner. Ovan använde vi border-radius i samband med -webkit-border-radius och -moz-border-radius.
När vi vill implementera avrundade hörn i vår CSS måste vi manuellt lista alla dessa versioner. Jag ser din hjärna tickar bort och ger ett argument om hur du enkelt kan ställa in dessa stilar till en klass, men vad händer om du vill ha flexibilitet för att finjustera gränsenradiusen per element? Att skapa en återanvändbar CSS-klass är en bra lösning, men du kan ta denna idé mycket längre med LESS.
LESS tillåter dig att väsentligen ställa in flera variabler i en enda klass som sedan kan inbäddas någon annanstans i din kod. För att konfigurera en mixin med LESS, använd följande syntax:
Koden ovan anger en variabel för radie och gör den lika med 12px, kasta den i alla gränserna, och lagrar all denna information i en klass som heter .roundedCorners.
Nu när vi vill applicera avrundade hörn till ett objekt, slår vi helt enkelt i klassen.
Detta kommer att applicera en 12 px hörnradio till vår box div med alla lämpliga proprietära versioner.
Kom ihåg att 12px-radien vi installerar i mixin är bara en standard som går över när inga parametrar anges under samtalet. Du kan växelvis infoga den här klassen och snabbt ställa in radieradien till ett annat nummer.
Den här koden använder fortfarande alla olika radienversioner men kommer automatiskt att hålla 20px i som värdet för radien. Detta gör det super snabbt att implementera anpassade iterationer av en CSS3-egenskap. Låt oss gå djupare ner i kaninhålet och se hur man gör det med mer komplicerade egenskaper.
Multipla variabla mixiner
Borderradie var ett enkelt exempel eftersom det bara innehåller ett enda värde att arbeta med, men hur är det med mer komplicerade egenskaper som boxskugga?
Som du kan se ovan måste vi ställa in fyra olika variabler för att vara enhetliga över de tre versionerna. Det kan låta komplicerat men lyckligtvis fungerar det i stort sett detsamma som det skulle i JavaScript. För att hålla exemplet enkelt använder vi bara standardfältskuggan för att se hur det här görs.
Här ställer vi in variabler för de horisontella och vertikala förskjutningarna samt för suddradie och skuggfärg. Observera att dessa värden är insläppta i en enda uppsättning parentes och åtskilda av kommatecken. Sedan på insidan av parenteserna skriver vi ut det med variablerna precis som vi gjorde siffrorna ovan, utan några kommatecken som skiljer värdena.
Så låt oss säga att vi ville tillämpa avrundade hörn, en boxskugga och en övergång till ett objekt med hjälp av LESS och CSS. Koden du använder skulle se ut som följande:
Då skulle implementeringen av dessa likna koden nedan.
Som du kan se tillämpade vi variablerna för höjden, bredden och färgen på rutan och genomförde sedan rutorna roundedCorners och boxShadow. Slutligen skapade vi en svänghändelse som övergick bakgrundsfärgen från primärfärgen till sekundärfärgen.
Nested Rules
Exemplet ovan kan förenklas ytterligare genom att använda LESS s kapslade reglerfunktion. Se hur vi kan kasta alla rutformar i samma uppsättning parentes och eliminera behovet att skriva ut div ID varje gång.
Som du kan se är alla lådans länkstilar, länkhuvudstilar och styckeformat innehållna i samma förälder.
sammanställa
Jag vet vad du tänker, allt detta är bra och bra, men kan jag verkligen använda den? Laddar den långsammare än standard CSS? Vilka webbläsare stöder det?
Det visar sig att alla dessa och andra liknande frågor inte spelar någon roll. Tanken bakom MINDRE är att påskynda och förenkla bara utvecklingssteget. Detta betyder vad som går live på din sista webbplats ska vara vanlig gammal CSS, inte mindre.
När du är färdig med att arbeta på din webbplats behöver du bara kompilera de mindre i CSS med din webbläsare. För att göra detta, öppna helt enkelt din HTML-fil i en webbläsare och visa källkoden CSS. Vad du ser, oavsett vad du faktiskt kodade, är en vanlig CSS-struktur. Kopiera och klistra in det här som ett CSS-dokument och du är redo att gå.
Kompilerar med LESS.app
För att göra saker ännu enklare kan du helt automatisera kompileringsprocessen med den gratis LESS-applikationen.
Allt du behöver göra är att dra i projektmappen som innehåller dina MINDER filer? det är allt! Det finns inget steg två. När du fortsätter att tweak och spara dina MINDER filer, skapas en ny CSS-fil automatiskt.
Slutsats
Sammanfattningsvis kan LESS nu implementeras med endast två kodrader i din HTML och kan dramatiskt ändra sättet du skriver CSS. Tillbringa några månader med LÄSER och du skapar och anpassar komplexa stylesheets snabbare än någonsin tidigare.
Du kan använda LÄRRE för att skapa variabler, utföra operationer på variabler, bosättningsregler och bygga komplicerade mixins för att förenkla din CSS3.
Lämna en kommentar nedan och låt oss veta vad du tycker om MINDRE. Tror du att det är ett bra verktyg eller slöseri med tid? Vi vill veta!