MINDRE CSS - Begynnerveiledning
CSS Preprosessor har nå blitt et fundament i webutvikling. Den sender vanlig CSS med programmeringsegenskaper som Variabler, Funksjoner eller Mixin, og Operasjon som tillater webutviklere å bygge modulære, skalerbare og mer håndterbare CSS-stiler.
I dette innlegget skal vi se nærmere på LESS, som har vært en av de mest populære CSS Pre-prosessorer rundt, og har også blitt utbredt i mange front-end rammer som Bootstrap. Vi vil også gå gjennom grunnleggende verktøy, verktøy og oppsett for å hjelpe deg med å komme i gang med mindre.
Kompilatoren
Til å begynne med må vi sette opp en kompilator. MINDRE syntaks er ikke-standard, per W3C-spesifikasjon. Nettleseren ville ikke kunne behandle og gjengi produksjonen, til tross for arvelige egenskaper som ligner på CSS.
Her er et glimt på LESS kode:
@ fargebase: # 2d5e8b; .class1 bakgrunnsfarge: @ fargebase; .class2 bakgrunnsfarge: #fff; farge: @ farge-base;
Kompilatoren vil behandle koden og konvertere MINST syntax til nettleser-kompatibelt CSS-format:
.klasse1 bakgrunnsfarge: # 2d5e8b; .class1 .class2 bakgrunnsfarge: #fff; farge: # 2d5e8b;
Det finnes en rekke verktøy for å samle CSS:
Bruk av JavaScript
Mindre kommer med a less.js fil som er veldig enkelt å distribuere på nettstedet ditt. Lag et stilark med .mindre utvidelse og lenke det i dokumentet ditt ved hjelp av rel = "stylesheet / mindre" Egenskap.
Du kan hente JS-filen her, laste den ned via Bower-pakkebehandling, ellers direkte link til CDN, slik som:
Du er alt satt og kan skrive stiler i .mindre. Den MINDRE syntaksen blir kompilert i fly som siden laster. Husk at bruk av JavaScript er motløs i produksjonsfasen, da det vil påvirke nettstedets ytelse sterkt.
Du bør alltid kompilere MINDRE syntaks på forhånd og bare tjene vanlig CSS i stedet. Du kan bruke Terminal, en jobbløper som Grynte eller Gulp, eller en grafisk applikasjon for å gjøre det.
Bruke CLI
LESS gir et innfødt kommandolinjegrensesnitt (CLI), lessc, som håndterer flere oppgaver utover bare å samle LESS syntaks. Ved hjelp av CLI kan vi lint kodene, komprimere filene og opprette et kildeskart. Kommandoen er basert på Node.js som effektivt gjør at kommandoen kan fungere på tvers av Windows, OS X og Linux.
Kontroller at Node.js er installert (ellers ta tak i installasjonsprogrammet her), og installer LESS CLI gjennom NPM (Node Package Manager) ved å bruke følgende kommandolinje.
npm installere -g mindre
Nå har du lessc kommandoen til din disposisjon for å kompilere MINDRE i CSS:
lessc style.less style.css
Bruke oppgaveløperen
Oppgaveløper er et verktøy som automatiserer utviklingsoppgaver og arbeidsflyter. Snarere enn å kjøre lessc kommandoen hver gang vi ønsker å kompilere kodene våre, kan vi installere installere en oppgaveløper, og sette den til å se endringer i våre MINDRE filer, og samle øyeblikkelig LESS inn i CSS.
To populære verktøy i denne kategorien i dag er Grunt and Gulp. Vi har en serie med innlegg som dekker disse verktøyene. Kontroller innleggene for å lære hvordan du distribuerer disse verktøyene i arbeidsflyten din.
- Slik bruker du Grunt for å automatisere arbeidsflyten din
- Komme i gang med Gulp.js
- Slaget ved å bygge skript: Gulp Vs Grunt
Bruke grafisk applikasjon
For de som kanskje ikke er vant til å bruke Terminal- og kommandolinjer, kan de velge et grafisk grensesnitt i stedet. Det finnes en overflod av programmer for å kompilere MINDRE i dag for alle plattformer - noen gratis, noen betalt
Her er den komplette listen:
| app | Plattform | Koste |
| Blanding | OS X / Windows | Gratis |
| Koala | OS X / Windows / Linux | Gratis |
| Prepros | OS X / Windows | Freemium (USD29) |
| winless | Windows | Gratis |
| CodeKit | OS X | USD32 |
Hvilken kompilator du velger (bortsett fra JavaScript) spiller ingen rolle, ærlig talt, så lenge verktøyet fungerer og utfyller arbeidsflyten din, gå for det.
Kodeditoren
Du kan bruke alle kodeditorer. Bare installer et plugin eller en utvidelse for å markere LESS syntaks med riktige farger, en funksjon som nå er tilgjengelig for nesten alle kodeditorer og IDEer, inkludert SublimeText, Notepad ++, VisualStudio, TextMate og Eclipse for å nevne noen få.
Nå som vi har kompilatoren og kodeditoren helt sett, kan vi begynne å skrive CSS-stiler med MINDRE syntaks.
MINDRE syntaks
I motsetning til vanlig CSS som vi kjenner det, fungerer LESS mye mer som et programmeringsspråk. Det er dynamisk, så forvent å finne noen terminologier som variabler, Operasjon og omfang langs veien.
variabler
Først av alt, la oss ta en titt på variabler.
Hvis du har jobbet ganske lenge med CSS, har du sannsynligvis skrevet noe som dette, der vi har gjentatte verdier som er tildelt i deklarasjonsblokkene i hele stilarket.
.klasse1 bakgrunnsfarge: # 2d5e8b; .class2 bakgrunnsfarge: #fff; farge: # 2d5e8b; .class3 border: 1px solid # 2d5e8b;
Denne praksisen er faktisk bra - til vi finner oss selv nødt til å sile gjennom mer enn tusen eller flere lignende utdrag gjennom stilarket. Dette kan skje når du bygger et stort nettsted. Arbeidet vil bli kjedelig.
Hvis vi bruker en CSS pre-prosessor som LESS, ville forekomsten ovenfor ikke være et problem - vi kan bruke variabler. Variablene vil tillate oss å lagre en konstant verdi som senere kan gjenbrukes i hele stilarket.
@ fargebase: # 2d5e8b; .class1 bakgrunnsfarge: @ fargebase; .class2 bakgrunnsfarge: #fff; farge: @ farge-base; .class3 border: 1px solid @ color-base;
I eksemplet ovenfor lagrer vi fargen # 2d5e8b i @ Farge-basen variabel. Når du vil endre fargen, trenger vi bare å endre verdien i denne variabelen.
Bortsett fra farge, kan du også sette andre verdier i variablene som for eksempel:
@ font-familie: Georgia @ dot-border: dotted @transition: lineær @opacity: 0.5
mixins
I MINDRE kan vi bruke mixins å gjenbruke hele deklarasjoner i en CSS-regel satt i et annet regelsett. Her er et eksempel:
.gradienter bakgrunn: #eaeaea; bakgrunn: lineær gradient (topp, #eaeaea, #cccccc); bakgrunn: -o-lineær-gradient (topp, #eaeaea, #cccccc); bakgrunn: -ms-lineær-gradient (topp, #eaeaea, #cccccc); bakgrunn: -moz-lineær-gradient (topp, #eaeaea, #cccccc); bakgrunn: -webkit-lineær-gradient (topp, #eaeaea, #cccccc);
I den ovennevnte koden har vi forhåndsinnstilt en standard gradient farge inne i .gradienter klasse. Når vi vil legge til gradienter, setter vi bare inn .gradienter denne måten:
div .gradients; border: 1px solid # 555; border-radius: 3px;
De .eske vil arve alle deklarasjonsblokkene inne i .gradienter. Så, CSS-regelen ovenfor er lik den følgende vanlige CSS:
div bakgrunn: #eaeaea; bakgrunn: lineær gradient (topp, #eaeaea, #cccccc); bakgrunn: -o-lineær-gradient (topp, #eaeaea, #cccccc); bakgrunn: -ms-lineær-gradient (topp, #eaeaea, #cccccc); bakgrunn: -moz-lineær-gradient (topp, #eaeaea, #cccccc); bakgrunn: -webkit-lineær-gradient (topp, #eaeaea, #cccccc); border: 1px solid # 555; border-radius: 3px;
Videre, hvis du bruker CSS3 mye på nettstedet ditt, kan du bruke MINDRE Elementer for å gjøre jobben din lettere. MINDRE Elementer er en samling av felles CSS3 Mixins som vi ofte bruker i stilark, for eksempel border-radius, gradienter, slagskygge og så videre.
For å bruke MINDRE Elementer, legg ganske enkelt til @importere regelen i ditt mindre stilark, men ikke glem å laste det ned først og legg det til i arbeidskatalogen din.
@import "elements.less";
Vi kan nå gjenbruke alle klasser levert fra elements.less, for eksempel å legge til 3px grense radius til a div, vi kan skrive:
div .rounded (3px);
For ytterligere bruk, vennligst se den offisielle dokumentasjonen.
Nestede regler
Når du skriver stiler i vanlig CSS, kan du også ha kommet gjennom disse typiske kodestrukturene.
nav høyde: 40px; bredde: 100%; bakgrunn: # 455868; border-bottom: 2px solid # 283744; nav li bredde: 600px; høyde: 40px; nav li a color: #fff; linjehøyde: 40px; tekstskygge: 1px 1px 0px # 283744;
I vanlig CSS velger vi barnelementer ved først å målrette foreldrene i hvert regelsett, noe som er betydelig overflødig hvis vi følger “beste praksis” prinsipp.
I MINDRE CSS kan vi forenkle regelen sett av nesting av barnets elementer inne i foreldrene, som følger;
nav høyde: 40px; bredde: 100%; bakgrunn: # 455868; border-bottom: 2px solid # 283744; li bredde: 600px; høyde: 40px; en farge: #fff; linjehøyde: 40px; tekstskygge: 1px 1px 0px # 283744;
Du kan også tildele pseudo-klasser, som :sveve, til velgeren ved hjelp av ampersand (&) symbolet.
La oss si at vi vil legge til :sveve til ankermerket ovenfor, kan vi skrive det på denne måten:
en farge: #fff; linjehøyde: 40px; tekstskygge: 1px 1px 0px # 283744; &: svever bakgrunnsfargen: # 000; farge: #fff;
Operasjon
Vi kan også utføre operasjoner i mindre, for eksempel tillegg, subtraksjon, multiplikasjon og divisjon til tall, farger og variabler i stilarket.
La oss si at vi vil at element B skal være to ganger høyere enn element A. I så fall kan vi skrive det på denne måten:
@height: 100px .element-A height: @height; .element-B høyde: @height * 2;
Som du kan se ovenfor lagrer vi først verdien i @høyde variabel, og tilordne verdien til element A.
I element B, i stedet for å beregne høyden oss selv, vi kan formere høyden med 2 bruker stjerneoperatøren (*). Nå, når vi endrer verdien i @høyde variabel, element B vil alltid ha to ganger høyden.
Ta en titt på mer avanserte operasjonseksempler i vår tidligere opplæring: Utforming av en slank menynavigasjonslinje.
omfang
MINDRE gjelder omfang konsept, hvor variabler vil bli arvet først fra det lokale omfanget, og når det ikke er tilgjengelig lokalt, vil det søke gjennom et bredere omfang.
header @color: black; bakgrunnsfarge: @color; nav @color: blue; bakgrunnsfarge: @color; en farge: @color;
I eksemplet ovenfor er Overskrift har en svart bakgrunnsfarge, men navBakgrunnsfargen vil være blå som den har @color-variabelen i sitt lokale omfang, mens en vil også ha blå som er arvet fra sin nærmeste forelder, nav.
Endelig tanke
Til slutt håper vi dette innlegget kan gi deg en grunnleggende forståelse av hvordan vi kan skrive CSS på en bedre måte med mindre. Du kan kanskje føle deg litt vanskelig i begynnelsen, men når du prøver det oftere, vil det sikkert bli mye lettere.
Her er et par opplæringsprogrammer som jeg oppfordrer deg til å se etter ytterligere tips og praksis, noe som kan bidra til å presse MINDRE ferdigheter opp til neste nivå.
- MINDRE CSS-veiledning: Utforming av en slank menynavigasjonslinje
- Forstå mindre fargefunksjoner
- 3 Nye MINDRE CSS-funksjoner du bør vite
