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-forprosessorer rundt, og har også blitt utbredt i mange front-end rammer som Bootstrap. Vi vil også gå gjennom de grunnleggende verktøyene, verktøyene og oppsettene 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 MINDRE syntaks til nettleser-kompatibelt CSS-format:

 .class1 {bakgrunnsfarge: # 2d5e8b; } .class1 .class2 {bakgrunnsfarge: #fff; farge: # 2d5e8b; } 

Det finnes en rekke verktøy for å samle CSS:

Bruk av JavaScript

Mindre kommer med en less.js fil som er veldig enkel å distribuere på nettstedet ditt. Opprett et stylesheet med .less utvidelse og lenke det i dokumentet ditt ved hjelp av rel="stylesheet/less" attributtet.

Du kan hente JS-filen her, laste den ned via Bower-pakkebehandling, ellers direkte link til CDN, slik som:

Du er helt innstilt og kan skrive stiler i .less . 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 syntaksen på forhånd og bare betjene vanlig CSS i stedet. Du kan bruke Terminal, en Task Runner som Grunt eller Gulp, eller et grafisk program 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 lar kommandoen 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 hjelp av følgende kommandolinje.

 npm installere -g mindre 

Nå har du kommandoen lessc til rådighet for å samle LESS i CSS:

 lessc style.less style.css 

Bruke oppgavelinjeren

Oppgaveløper er et verktøy som automatiserer utviklingsoppgaver og arbeidsflyter. I stedet for å kjøre kommandoen lessc hver gang vi ønsker å kompilere kodene våre, kan vi installere installere en oppgaveløper, og sette den på for å 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 applikasjoner 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, helt ærlig, så lenge verktøyet fungerer og utfyller arbeidsflyten din, går du etter 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.

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, drift og omfang underveis.

variabler

Først av alt, la oss ta en titt på variablene .

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.

 .class1 {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 lar 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 variabelen @color-base #2d5e8b . 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 LESS kan vi bruke Mixins til å gjenbruke hele deklarasjoner i en CSS-regel som er angitt i et annet regelsett. Her er et eksempel:

 .gradients {background: #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 standardgradientfarge inne i .gradients klassen. Når vi vil legge til gradienter, setter vi ganske enkelt inn gradientene på denne måten:

 div {.gradients; grense: 1px solid # 555; border-radius: 3px; } 

.box vil arve alle deklarasjonsblokken i .gradients . 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); grense: 1px solid # 555; border-radius: 3px; } 

Videre, hvis du bruker CSS3 mye på nettstedet ditt, kan du bruke MINDRE Elementer for å gjøre jobben mye enklere. MINDRE Elementer er en samling av vanlige CSS3 Mixins som vi ofte bruker i stilark, for eksempel border-radius, gradients, drop-shadow og så videre.

Hvis du vil bruke MINDRE Elementer, legger du ganske enkelt til @import regelen i LESS stilark, men ikke glem å laste den ned først og legg det til i arbeidskatalogen.

 @import "elements.less"; 

Vi kan nå gjenbruke alle klassene som tilbys fra elements.less, for eksempel, for å legge til 3px kantradius til en div, kan vi skrive:

 div {.rounded (3px); } 

For ytterligere bruk, vennligst se den offisielle dokumentasjonen.

Nested Rules

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 prinsippet "beste praksis".

I MINDRE CSS kan vi forenkle regelsettene ved å nest barnelementene 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å tilordne pseudoklasser, som :hover, til velgeren ved hjelp av ampersand (&) symbolet.

La oss si at vi vil legge til :hover til ankermerket ovenfor, kan vi skrive det på denne måten:

 en {farge: #fff; linjehøyde: 40px; tekstskygge: 1px 1px 0px # 283744; &: svever {bakgrunnsfarge: # 000; farge: #fff; }} 

Operasjon

Vi kan også utføre operasjoner i mindre, for eksempel tillegg, subtraksjon, multiplikasjon og deling 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 @height variabelen, og tilordner verdien til element A.

I element B, i stedet for å beregne høyden oss selv, kan vi multiplisere høyden med 2 ved hjelp av asteriskoperatøren (*). Nå, når vi endrer verdien i @height variabelen, vil element B 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 omfanget konseptet, der 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 har header en svart bakgrunnsfarge, men navs bakgrunnsfarve vil være blå, da den har @color-variabelen i sitt lokale omfang, mens a 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