MINDRE CSS - Begyndervejledning
CSS Preprocessor er nu blevet en hæftemaskine i webudvikling. Det skibes almindeligt CSS med programmeringstræk som Variabler, Funktioner eller Mixin og Operation, som gør det muligt for webudviklere at bygge modulære, skalerbare og mere håndterbare CSS-stilarter.
I dette indlæg vil vi undersøge LESS, som har været en af de mest populære CSS-forprocessorer rundt, og er også blevet udbredt i mange front-end-rammer som Bootstrap. Vi vil også gå gennem grundlæggende værktøjer, værktøjer og opsætninger, der hjælper dig med at komme i gang med mindre.
Kompilatoren
Til at begynde med skal vi opsætte en compiler. MINDRE syntaks er ikke-standard, pr. W3C-specifikation. Browseren ville ikke være i stand til at behandle og give output, på trods af at der var tale om egenskaber svarende til CSS.
Her er et glimt på LESS kode:
@ farvebase: # 2d5e8b; .class1 baggrundsfarve: @ farvebase; .class2 baggrundsfarve: #fff; farve: @ farve-base;
Kompilatoren vil behandle koden og konvertere MINDRE syntax til browser-kompatibelt CSS-format:
.klasse1 baggrundsfarve: # 2d5e8b; .class1 .class2 baggrundsfarve: #fff; farve: # 2d5e8b;
Der er en række værktøjer til at kompilere CSS:
Brug af JavaScript
Mindre kommer med a less.js fil, der er meget nemt at implementere på din hjemmeside. Opret et stylesheet med .mindre udvidelse og linke det i dit dokument ved hjælp af rel = "stylesheet / mindre" attribut.
Du kan hente JS filen her, download den via Bower pakkeleder, ellers direkte link til CDN, sådan:
Du er helt indstillet og kan komponere stilarter indenfor .mindre. Den MINDSTE syntaks bliver kompileret i flyve som siden indlæser. Husk på at Brug af JavaScript er afskrækket i produktionsfasen, da det vil påvirke hjemmesiden ydeevne dårligt.
Du bør altid sammensætte MINDRE syntaks på forhånd og kun tjene regelmæssig CSS i stedet. Du kan bruge Terminal, en task runner gerne Grynte eller Gulp, eller en grafisk applikation til at gøre det.
Brug af CLI
MINDER giver en indbygget kommandolinje grænseflade (CLI), lessc, som håndterer flere opgaver ud over at blot samle LESS syntaks. Ved hjælp af CLI kan vi lint koderne, komprimere filerne og oprette et kildeskema. Kommandoen er baseret på Node.js, der effektivt tillader kommandoen at fungere på tværs af Windows, OS X og Linux.
Sørg for at Node.js er installeret (Ellers tag installationsprogrammet her), og installer LERE CLI gennem NPM (Node Package Manager) ved hjælp af følgende kommandolinje.
npm installer -g mindre
Nu har du den lessc kommando til din rådighed for at kompilere LESS i CSS:
lessc style.less style.css
Brug af task runner
Opgave runner er et værktøj, der automatiserer udviklingsopgaver og arbejdsgange. I stedet for at køre lessc kommando hver gang vi gerne vil kompilere vores koder, kan vi installere installere en task runner og indstille den til at se ændringer i vores mindre filer og kompilere øjeblikkeligt mindre til css.
To populære værktøjer i denne kategori i dag er Grunt and Gulp. Vi har en række poster, der dækker disse værktøjer. Kontrollér de indlæg, der skal bruges til at lære, hvordan du implementerer disse værktøjer i din arbejdsgang.
- Sådan bruger du Grunt til at automatisere din arbejdsgang
- Kom i gang med Gulp.js
- Slaget om bygningsskripter: Gulp Vs Grunt
Brug af grafisk applikation
For dem, der måske ikke er vant til at bruge Terminal- og kommandolinjer, kan de i stedet vælge en grafisk grænseflade. Der er en overflod af applikationer til at kompilere MINDER i dag for alle platforme - nogle gratis, nogle betalte
Her er den komplette liste:
| App | Platform | Koste |
| Blanding | OS X / Windows | Ledig |
| Koala | OS X / Windows / Linux | Ledig |
| Prepros | OS X / Windows | Freemium (USD29) |
| winless | vinduer | Ledig |
| CodeKit | OS X | USD32 |
Hvilken kompilator du vælger (bortset fra JavaScript) er ikke rigtig noget, ærligt, så længe værktøjet virker og supplerer dit workflow, gå efter det.
Kode Editor
Du kan bruge en hvilken som helst kode editor. Du skal blot installere et plugin eller en udvidelse for at fremhæve LESS syntaks med korrekte farver, en funktion, der nu er tilgængelig for næsten alle kode redaktører og IDE'er, herunder SublimeText, Notepad ++, VisualStudio, TextMate og Eclipse for at nævne nogle få.
Nu hvor vi har kompilatoren og kodeditoren helt indstillet, kan vi begynde at skrive CSS-stilarter med LESS syntaks.
MINDRE syntaks
I modsætning til almindelig CSS som vi kender det, fungerer LESS meget mere som et programmeringssprog. Det er dynamisk, så forvent at finde nogle terminologier som Variable, Operation og Anvendelsesområde langs vejen.
Variable
Først og fremmest, lad os tage et kig på Variable.
Hvis du har arbejdet ganske lidt med CSS, har du sikkert skrevet noget som dette, hvor vi har gentagne værdier tildelt i deklarationsblokke i hele stilarket.
.klasse1 baggrundsfarve: # 2d5e8b; .class2 baggrundsfarve: #fff; farve: # 2d5e8b; .class3 border: 1px solid # 2d5e8b;
Denne praksis er faktisk fint - indtil vi finder os nødt til at sejle gennem mere end tusind eller flere lignende uddrag i hele stilarket. Dette kan ske ved opbygning af en storstilet hjemmeside. Arbejdet bliver kedeligt.
Hvis vi bruger en CSS pre-prosessor som LESS, vil forekomsten ovenfor ikke være et problem - vi kan bruge Variable. Variablerne tillader os at gemme en konstant værdi, der senere kan genbruges i hele stilarket.
@ farvebase: # 2d5e8b; .class1 baggrundsfarve: @ farvebase; .class2 baggrundsfarve: #fff; farve: @ farve-base; .class3 border: 1px solid @ color-base;
I eksemplet ovenfor gemmer vi farven # 2d5e8b i @ Farve-basen variabel. Når du vil ændre farven, behøver vi kun at ændre værdien i denne variabel.
Bortset fra farve kan du også sætte andre værdier i variablerne som for eksempel:
@ font-familie: Georgia @ dot-border: prikket @transition: lineær @opacity: 0.5
Mixins
I LESS kan vi bruge Mixins at genbruge hele erklæringer i en CSS-regel, der er angivet i et andet regelsæt. Her er et eksempel:
.gradienter baggrund: #eaeaea; baggrund: lineær gradient (top, #eaeaea, #cccccc); baggrund: -o-lineær-gradient (top, #eaeaea, #cccccc); baggrund: -ms-lineær gradient (top, #eaeaea, #cccccc); baggrund: -moz-lineær-gradient (top, #eaeaea, #cccccc); baggrund: -webkit-lineær-gradient (top, #eaeaea, #cccccc);
I ovenstående uddrag har vi forudindstillet en standard gradient farve inde i .gradienter klasse. Når vi vil tilføje gradienterne, indsætter vi blot .gradienter denne måde:
div .gradients; grænse: 1px fast # 555; grænse-radius: 3px;
Det .boks vil arve alle deklarationsblokken inde i .gradienter. Så CSS-reglen ovenfor er lig med følgende almindelige CSS:
div baggrund: #eaeaea; baggrund: lineær gradient (top, #eaeaea, #cccccc); baggrund: -o-lineær-gradient (top, #eaeaea, #cccccc); baggrund: -ms-lineær gradient (top, #eaeaea, #cccccc); baggrund: -moz-lineær-gradient (top, #eaeaea, #cccccc); baggrund: -webkit-lineær-gradient (top, #eaeaea, #cccccc); grænse: 1px fast # 555; grænse-radius: 3px;
Hvis du bruger CSS3 meget på din hjemmeside, kan du desuden bruge mindre elementer til at gøre dit arbejde meget nemmere. MINDER Elementer er en samling af fælles CSS3 Mixins at vi måske ofte bruger i stylesheets, som f.eks border-radius, gradienter, drop-shadow og så videre.
For at bruge MINDER Elementer, skal du blot tilføje @importere reglen i dit mindre stilark, men glem ikke at downloade det først og tilføj det til din arbejdskatalog.
@import "elements.less";
Vi kan nu genbruge alle de klasser leveret fra elements.less, for eksempel at tilføje 3px grænseradius til a div, vi kan skrive:
div .rounded (3px);
For yderligere brug henvises til den officielle dokumentation.
Nested Rules
Når du skriver stilarter i almindeligt CSS, kan du også komme gennem disse typiske kode strukturer.
nav højde: 40px; bredde: 100%; baggrund: # 455868; border-bottom: 2px solid # 283744; nav li bredde: 600px; højde: 40px; nav li a farve: #fff; linjens højde: 40px; tekstskygge: 1px 1px 0px # 283744;
I almindelig CSS vælger vi barnelementer ved først at målrette moderselskabet i hvert regelsæt, hvilket er betydeligt overflødigt, hvis vi følger “bedste praksis” princip.
I LESS CSS kan vi forenkle regelsætene ved nestning af barnets elementer inde i forældrene, som følger;
nav højde: 40px; bredde: 100%; baggrund: # 455868; border-bottom: 2px solid # 283744; li bredde: 600px; højde: 40px; en farve: #fff; linjens højde: 40px; tekstskygge: 1px 1px 0px # 283744;
Du kan også tildele pseudo-klasser, synes godt om : hover, til vælgeren ved hjælp af ampersand (&) symbolet.
Lad os sige, at vi vil tilføje : hover til ankeretiketten ovenfor kan vi skrive det på denne måde:
en farve: #fff; linjens højde: 40px; tekstskygge: 1px 1px 0px # 283744; &: svinge baggrundsfarve: # 000; farve: #fff;
Operation
Vi kan også udføre operationer i mindre, f.eks Tilsætning, subtraktion, multiplikation og division til tal, farver og variabler i stilarket.
Lad os sige, at vi vil have element B to gange højere end element A. I så fald kan vi skrive det på denne måde:
@height: 100px .element-A height: @height; .element-B højde: @height * 2;
Som du kan se ovenfor gemmer vi først værdien i @højde variabel, og tildel derefter værdien til element A.
I element B, i stedet for at beregne højden os selv, vi kan formere højden med 2 ved hjælp af asteriskoperatøren (*). Nu, når vi ændrer værdien i @højde variabel, element B vil altid have to gange højden.
Se mere avancerede drift eksempler i vores tidligere vejledning: Design af en slick Menu Navigation Bar.
Anvendelsesområde
MINDRE gælder Anvendelsesområde koncept, hvor variabler vil blive arvet først fra lokalområdet, og når den ikke er tilgængelig lokalt, vil den søge gennem et bredere anvendelsesområde.
header @color: black; baggrundsfarve: @color; nav @color: blue; baggrundsfarve: @color; en farve: @color;
I eksemplet ovenfor, den header har en sort baggrundsfarve, men navbaggrundsfarve vil være blå da den har @color-variablen i sit lokale omfang, mens den -en vil også have blå, der er arvet fra sin nærmeste forælder, nav.
Endelig tanke
I sidste ende håber vi dette indlæg kan give dig en grundlæggende forståelse for, hvordan vi kan skrive CSS på en bedre måde ved at bruge mindre. Du kan måske føle dig lidt akavet i starten, men som du prøver det oftere, vil det helt sikkert blive meget lettere.
Her er et par vejledninger, som jeg opfordrer dig til at undersøge efter yderligere tips og praksis, som kan hjælpe med at skubbe din MINDRE færdighed op til det næste niveau.
- MINDRE CSS-vejledning: Udformning af en slick menunavigationslinje
- Forståelse af mindre farvefunktioner
- 3 Nye MINDRE CSS-funktioner, du bør vide
