MINDER CSS - Nybörjarhandbok
CSS Preprocessor har nu blivit en häftning i webbutveckling. Den skickar vanlig CSS med programmeringsegenskaper som Variabler, Funktioner eller Mixin och Drift som gör det möjligt för webbutvecklare att bygga modulära, skalbara och mer hanterbara CSS-stilar.
I det här inlägget kommer vi att titta på LESS som har varit en av de mest populära CSS-förprocessorerna runt, och har också blivit utbredd i många front-end-ramar som Bootstrap. Vi kommer också att gå igenom grundläggande verktyg, verktyg och inställningar för att hjälpa dig att komma igång med mindre.
Kompilatorn
Till att börja med måste vi konfigurera en kompilator. MINDRE syntaxen är icke-standard, per W3C-specifikation. Webbläsaren skulle inte kunna bearbeta och göra utmatningen, trots att arvsegenskaper liknar CSS.
Här är en glimt på LESS-kod:
@ färgbas: # 2d5e8b; .class1 bakgrundsfärg: @ färgbas; .class2 bakgrundsfärg: #fff; färg: @ färgbas;
Kompilatorn kommer att behandla koden och förvandla MINDER syntax till CSS-format som är kompatibelt med webbläsare:
.klass1 bakgrundsfärg: # 2d5e8b; .class1 .class2 bakgrundsfärg: #fff; färg: # 2d5e8b;
Det finns ett antal verktyg för att sammanställa CSS:
Använda JavaScript
MINDER kommer med a less.js fil som är väldigt lätt att distribuera på din webbplats. Skapa ett stylesheet med .mindre förlängning och länka den i ditt dokument med hjälp av rel = "format / mindre" attribut.
Du kan hämta JS-filen här, ladda ner den via Bower-pakethanteraren, annars direkt länka till CDN, så här:
Du är upptagen och kan skriva stilar inom .mindre. MINDRE syntaxen kommer att kompileras i flygningen när sidan laddas. Tänk på att Att använda JavaScript är avskräckt i produktionsfasen, eftersom det påverkar webbplatsens prestanda väldigt.
Du bör alltid kompilera MINDRE syntaxen i förväg och endast servera regelbunden CSS istället. Du kan använda Terminal, en arbetslöpare som Grymta eller Klunk, eller en grafisk applikation för att göra det.
Använda CLI
MINDER tillhandahåller ett inbyggt kommandoradsgränssnitt (CLI), lessc, som hanterar flera uppgifter utöver att bara sammanställa MINDRE syntaxen. Med CLI kan vi fästa koderna, komprimera filerna och skapa en källkarta. Kommandot är baserat på Node.js som effektivt tillåter kommandot att fungera över Windows, OS X och Linux.
Se till att Node.js har installerats (använd annars installationsprogrammet här), och installera sedan LÄGRE CLI via NPM (Node Package Manager) med följande kommandorad.
npm installera -g mindre
Nu har du lessc kommando till ditt förfogande för att kompilera LESS i CSS:
lessc style.less style.css
Använda Task Runner
Uppgiftslöpare är ett verktyg som automatiserar utvecklingsuppgifter och arbetsflöden. Snarare än att köra lessc kommandot varje gång vi vill kompilera våra koder, kan vi installera installera en arbetsrunner och ställa in den för att titta på ändringar i våra MINDER filer och omedelbart kompilera LESS i CSS.
Två populära verktyg i den här kategorin idag är Grunt and Gulp. Vi har en serie inlägg som täcker dessa verktyg. Kontrollera alla inlägg för att lära dig hur du distribuerar dessa verktyg i ditt arbetsflöde.
- Så här använder du Grunt för att automatisera ditt arbetsflöde
- Komma igång med Gulp.js
- Slaget vid byggnadsskript: Gulp Vs Grunt
Använda grafisk applikation
För de som kanske inte är vana vid att använda Terminal- och kommandoraden, kan de istället välja ett grafiskt gränssnitt. Det finns ett överflöd av applikationer för att kompilera LESS idag för alla plattformar - några gratis, några betalade
Här är den fullständiga listan:
| App | Plattform | Kosta |
| Blandning | OS X / Windows | Fri |
| Koala | OS X / Windows / Linux | Fri |
| Prepros | OS X / Windows | Freemium (USD29) |
| winless | Windows | Fri |
| CodeKit | OS X | USD32 |
Vilken kompilator du väljer (bortsett från JavaScript) spelar ingen roll så mycket, så länge verktyget fungerar och kompletterar ditt arbetsflöde, gå för det.
Kodredigeraren
Du kan använda vilken kodredigerare som helst. Installera bara ett plugin eller en förlängning för att markera LÄSER syntax med rätt färger, en funktion som nu är tillgänglig för nästan alla kodredigerare och IDEer inklusive SublimeText, Notepad ++, VisualStudio, TextMate och Eclipse för att nämna några.
Nu när vi har kompilatorn och kodredigeraren helt uppsatt kan vi börja skriva CSS-stilar med LESS syntax.
MINDRE Syntax
Till skillnad från vanlig CSS som vi känner till fungerar LESS mycket mer som ett programmeringsspråk. Det är dynamiskt, så förvänta dig att hitta några terminologier som variabler, Drift och Omfattning längs vägen.
variabler
Låt oss först titta på variabler.
Om du har arbetat ganska länge med CSS har du förmodligen skrivit något så här, där vi har upprepade värden som tilldelats i deklarationsblocken i hela stilarket.
.klass1 bakgrundsfärg: # 2d5e8b; .class2 bakgrundsfärg: #fff; färg: # 2d5e8b; .class3 border: 1px solid # 2d5e8b;
Denna praxis är faktiskt bra - tills vi befinner oss måste siktas genom mer än tusen eller fler liknande utdrag genom hela stilarket. Det kan hända när man bygger en storskalig webbplats. Arbetet blir tråkigt.
Om vi använder en CSS pre-processor som LESS, skulle förekomsten ovan inte vara ett problem - vi kan använda variabler. Variablerna tillåter oss att lagra en konstant värde som senare kan återanvändas i hela stilarket.
@ färgbas: # 2d5e8b; .class1 bakgrundsfärg: @ färgbas; .class2 bakgrundsfärg: #fff; färg: @ färgbas; .class3 border: 1px solid @ color-base;
I exemplet ovan lagrar vi färgen # 2d5e8b i @ Färg-base variabel. När du vill ändra färgen behöver vi bara ändra värdet i denna variabel.
Bortsett från färg kan du också sätta andra värden i variablerna som till exempel:
@ font-family: Georgia @ dot-border: prickad @transition: linjär @opacity: 0.5
Mixins
I MINDRE kan vi använda Mixins att återanvända hela deklarationer i en CSS-regel som anges i en annan regeluppsättning. Här är ett exempel:
.gradienter bakgrund: #eaeaea; bakgrund: linjär gradient (topp, #eaeaea, #cccccc); bakgrund: -o-linjär-gradient (topp, #eaeaea, #cccccc); bakgrund: -ms-linjär-gradient (topp, #eaeaea, #cccccc); bakgrund: -moz-linjär-gradient (topp, #eaeaea, #cccccc); bakgrund: -webkit-linjär-gradient (topp, #eaeaea, #cccccc);
I ovanstående kod har vi förinställt en standard lutning färg inuti .gradienter klass. När vi vill lägga till gradienterna sätter vi helt enkelt in .gradienter den här vägen:
div .gradients; gräns: 1px fast # 555; gränsstråle: 3px;
De .låda kommer att ärva alla förklaringsblocket inuti .gradienter. Så, CSS-regeln ovan är lika med följande vanliga CSS:
div bakgrund: #eaeaea; bakgrund: linjär gradient (topp, #eaeaea, #cccccc); bakgrund: -o-linjär-gradient (topp, #eaeaea, #cccccc); bakgrund: -ms-linjär-gradient (topp, #eaeaea, #cccccc); bakgrund: -moz-linjär-gradient (topp, #eaeaea, #cccccc); bakgrund: -webkit-linjär-gradient (topp, #eaeaea, #cccccc); gräns: 1px fast # 555; gränsstråle: 3px;
Dessutom, om du använder CSS3 mycket på din webbplats kan du använda MINDRE Element för att göra ditt jobb mycket enklare. MINDER Element är en samling av vanliga CSS3 Mixins som vi kan använda ofta i stylesheets, till exempel border-radius, gradienter, drop-shadow och så vidare.
För att använda MINDER Element, lägg bara till @importera reglera i ditt LÄSER stilark, men glöm inte att ladda ner det först och lägg till det i din arbetsregister.
@import "elements.less";
Vi kan nu återanvända alla klasser tillhandahålls från elements.less, till exempel att lägga till 3px gränsen radie till a div, vi kan skriva:
div .rounded (3px);
För ytterligare användning hänvisas till den officiella dokumentationen.
Nested Rules
När du skriver stilar i vanlig CSS kan du också ha kommit igenom dessa typiska kodstrukturer.
nav höjd: 40px; bredd: 100%; bakgrund: # 455868; border-bottom: 2px solid # 283744; nav li bredd: 600px; höjd: 40px; nav li a color: #fff; linjehöjd: 40px; textskugga: 1px 1px 0px # 283744;
I vanlig CSS väljer vi barnelement genom att först rikta in föräldrarna i varje regelsats, vilket är avsevärt överflödigt om vi följer “bästa praxis” princip.
I MINDRE CSS kan vi förenkla regeluppsättningarna med nestning av barnelementen inuti föräldrarna, som följer;
nav höjd: 40px; bredd: 100%; bakgrund: # 455868; border-bottom: 2px solid # 283744; li bredd: 600px; höjd: 40px; en färg: #fff; linjehöjd: 40px; textskugga: 1px 1px 0px # 283744;
Du kan också tilldela pseudo-klasser, tycka om :sväva, till väljaren med ampersand (&) symbolen.
Låt oss säga att vi vill lägga till :sväva till ankaretiketten ovan kan vi skriva det så här:
en färg: #fff; linjehöjd: 40px; textskugga: 1px 1px 0px # 283744; &: sväva bakgrundsfärg: # 000; färg: #fff;
Drift
Vi kan också utföra operationer i mindre, till exempel addition, subtraktion, multiplikation och division till siffror, färger och variabler i stilarket.
Låt oss säga att vi vill att element B ska vara två gånger högre än element A. I det fallet kan vi skriva det så här:
@höjd: 100px .element-A höjd: @height; .element-B höjd: @höjd * 2;
Som du kan se ovan lagrar vi först värdet i @höjd variabel, tilldela sedan värdet till element A.
I element B, istället för att beräkna höjden oss själva, vi kan multiplicera höjden med 2 med hjälp av asteriskoperatören (*). Nu, när vi ändrar värdet i @höjd variabel, element B kommer alltid att ha dubbelt så mycket som höjden.
Kolla in mer avancerade drift exempel i vår tidigare handledning: Designing A Slick Meny Navigation Bar.
Omfattning
MINDER gäller Omfattning koncept, där variabler kommer att arva först från lokal räckvidd, och när den inte är tillgänglig lokalt kommer den att söka igenom ett större omfång.
rubrik @ färg: svart; bakgrundsfärg: @color; nav @color: blue; bakgrundsfärg: @color; en färg: @color;
I exemplet ovan rubrik har en svart bakgrundsfärg, men navbakgrundsfärg kommer att vara blå eftersom den har variabeln @color i sitt lokala räckvidd, medan en kommer också att ha blått som är ärvt från sin närmaste förälder, nav.
Slutlig tanke
I slutändan hoppas vi det här inlägget kan ge dig en grundläggande förståelse för hur vi kan skriva CSS på ett bättre sätt med mindre. Du kanske känner dig lite besvärlig först, men som du försöker oftare blir det säkert mycket lättare.
Här är några tutorials som jag uppmuntrar dig att leta efter ytterligare tips och rutiner, vilket kan hjälpa till att trycka på din MINDRE skicklighet upp till nästa nivå.
- MINDRE CSS-handledning: Designa en smidig menynavigationsfält
- Förstå mindre färgfunktioner
- 3 Nya mindre CSS-funktioner du borde veta
