Share
Å bruke den sanne kraften til en CSS preprocessor er et eventyr. Det finnes utallige språk, syntakser og funksjoner, alle klare til bruk akkurat nå.
I denne artikkelen vil vi dekke de ulike funksjonene og fordelene ved å bruke tre forskjellige preprosessorer-Sass, LESS og Stylus.
Preprosessorer produserer CSS som fungerer i alle nettlesere.
CSS3-forprosessorer er språk skrevet med det ene formål å legge til kule, oppfinnsomme funksjoner til CSS uten å bryte nettleserkompatibiliteten. De gjør dette ved å samle koden vi skriver inn i vanlig CSS som kan brukes i hvilken som helst nettleser helt tilbake til steinalderen. Det er tusenvis av funksjoner som preprosessorer bringer til bordet, og i denne artikkelen vil vi dekke noen av de publiserte, og noen av de ikke-så-publiserte. La oss komme i gang.
Den viktigste delen av skrivingskoden i en CSS preprocessor er å forstå syntaxen. Heldigvis for oss er syntaksen (eller kan være) identisk med vanlig CSS for alle tre preprosessorer.
Sass og MINDER bruker begge standard CSS-syntaksen. Dette gjør det svært enkelt å konvertere en eksisterende CSS-fil til enten preprosessor. Sass bruker .SCSS filtype og MINDRE bruker .mindre forlengelse. Den grunnleggende Sass eller MINDRE filen kan settes opp som nedenfor:
/ * style.scss eller style.less * / h1 color: # 0982C1;
Som du kanskje har lagt merke til, er dette bare vanlig CSS, som kompilerer perfekt både i Sass og LESS.
Det er viktig å merke seg at Sass også har en eldre syntaks, som utelater semikoloner og krøllete parenteser. Selv om dette fortsatt er rundt, er det det gammel og vi vil ikke bruke det forbi dette eksemplet. Syntaxen bruker .sass filtillegg og ser slik ut:
/ * style.sass * / h1 farge: # 0982c1
Syntaxen for Stylus er mye mer verbose. Bruker .styl filtillegg, godtar Stylus standard CSS-syntaks, men det aksepterer også noen andre variasjoner der parenteser, kolonner og halvkolonner er alle valgfrie. For eksempel:
/ * style.styl * / h1 color: # 0982C1; / * utelat parentes * / h1 farge: # 0982C1; / * unnlate kolonier og halvkolonner * / h1 farge # 0982C1
Bruke forskjellige variasjoner i samme stilark er også gyldig, så følgende vil kompilere uten feil.
h1 farge # 0982c1 h2 skriftstørrelse: 1.2em
Variabler kan deklareres og brukes i stilarket. De kan ha noen verdi som er en CSS-verdi (for eksempel farger, tall [inkludert enheter] eller tekst.), Og kan refereres hvor som helst i hele stilarket.
Sass variabler er prepended med $ symbol og verdien og navnet er skilt med en semikolon, akkurat som en CSS-egenskap.
$ mainColor: # 0982c1; $ siteWidth: 1024px; $ borderStyle: prikket; kropp farge: $ mainColor; grense: 1px $ borderStyle $ mainColor; maksimal bredde: $ siteWidth;
MINDRE variabler er nøyaktig det samme som Sass-variabler, bortsett fra at de variable navnene er prepended med @ symbol.
@mainColor: # 0982c1; @siteWidth: 1024px; @borderStyle: prikket; kropp farge: @mainColor; grense: 1px @ borderStyle @mainColor; maksimal bredde: @siteWidth;
Stylusvariabler krever ikke noe å bli prepended til, selv om det tillater det $ symbol. Som alltid er slutten semikolon ikke nødvendig, men et likestegn mellom verdien og variabelen er. En ting å merke seg er at Stylus (0.22.4) kompilerer hvis vi prepend @ symbol til et variabelt navn, men vil ikke bruke verdien når referert. Med andre ord, ikke gjør det.
mainColor = # 0982c1 siteWidth = 1024px $ borderStyle = prikket kroppsfarge mainColor grense 1px $ borderStyle mainColor maksimal bredde siteWidth
Hver av de ovennevnte filene vil kompilere til samme CSS. Du kan bruke fantasien din til å se hvor nyttige variabler kan være. Vi trenger ikke lenger å endre en farge og må skrive den på nytt tjue ganger, eller ønsker å endre bredden på nettstedet og må grave rundt for å finne den. Her er CSS etter samling:
kropp farge: # 0982c1; border: 1px prikket # 0982c1; maksimal bredde: 1024px;
Hvis vi trenger å referere til flere elementer med samme forelder i vårt CSS, kan det være kjedelig å fortsette å skrive foreldrene om og om igjen.
delen margin: 10px; seksjon nav høyde: 25px; seksjon nav en farge: # 0982C1; delen nav a: hover text-decoration: understreke;
I stedet, ved hjelp av en preprosessor, kan vi skrive barnselektorene inne i foreldrenes braketter. Også, den & symbol refererer til foreldrevelgeren.
Alle tre preprosessorer har samme syntaks for nesting selektorer.
delen margin: 10px; nav høyde: 25px; en farge: # 0982C1; &: hover text-decoration: understreke;
Dette er kompilert CSS fra koden ovenfor. Det er akkurat det samme som når vi startet - hvor praktisk!
delen margin: 10px; seksjon nav høyde: 25px; seksjon nav en farge: # 0982C1; delen nav a: hover text-decoration: understreke;
Mixins er funksjoner som tillater gjenbruk av egenskaper i hele stilarket. Snarere enn å måtte gå gjennom hele stilarket vårt og endre en eiendom flere ganger, kan vi nå bare endre det i vår mixin. Dette kan være veldig nyttig for spesifikk styling av elementer og leverandør prefikser. Når mixins kalles fra en CSS-väljare, blir mixin-argumentene gjenkjent og stilene i mixin blir brukt til väljeren.
/ * Sass mixin-feil med (valgfritt) argument $ borderWidth som standard til 2px hvis ikke spesifisert * / @mixin error ($ borderWidth: 2px) border: $ borderWidth solid # F00; farge: # F00; .generisk-feil polstring: 20px; margin: 4px; @include error (); / * Gjelder stiler fra mixin feil * / .login-error left: 12px; posisjon: absolutt; topp: 20px; @include feil (5px); / * Gjelder stiler fra mixin-feil med argument $ borderWidth lik 5px * /
/ * Mindre blandingsfeil med (valgfritt) argument @borderWidth som standard til 2px hvis ikke spesifisert * / .error (@borderWidth: 2px) border: @borderWidth solid # F00; farge: # F00; .generisk-feil polstring: 20px; margin: 4px; .feil(); / * Gjelder stiler fra mixin feil * / .login-error left: 12px; posisjon: absolutt; topp: 20px; .error (5 px); / * Gjelder stiler fra mixin-feil med argument @borderWidth lik 5px * /
/ * Stylus mixin-feil med (valgfritt) argument borderWidth som standard til 2px hvis ikke spesifisert * / error (borderWidth = 2px) border: borderWidth solid # F00; farge: # F00; .generisk-feil polstring: 20px; margin: 4px; feil(); / * Gjelder stiler fra mixin feil * / .login-error left: 12px; posisjon: absolutt; topp: 20px; error (5 px); / * Gjelder stiler fra mixin error med argument borderWidth lik 5px * /
Alle forprosessorer samler til samme kode nedenfor:
.generisk feil polstring: 20px; margin: 4px; grense: 2px solid # f00; farge: # f00; .login-error left: 12px; posisjon: absolutt; topp: 20px; grense: 5px solid # f00; farge: # f00;
Når vi skriver CSS på den gammeldags måten, kan vi bruke følgende kode for å bruke de samme stilene til flere elementer samtidig:
p, ul, ol / * stiler her * /
Det fungerer bra, men hvis vi trenger å utforme elementene individuelt, må det opprettes en annen velger for hver, og den kan raskt bli mer messig og vanskeligere å vedlikeholde. For å motvirke dette kan arv brukes. Arv er evnen til andre CSS-selgere å arve egenskapene til en annen velger.
.blokkere margin: 10px 5px; polstring: 2px; p @extend .block; / * Arve stiler fra '.block' * / border: 1px solid #EEE; ul, ol @extend .block; / * Arve stiler fra '.block' * / color: # 333; tekst-transformer: store bokstaver;
.blokk, p, ul, ol margin: 10px 5px; polstring: 2px; p grense: 1px solid #EEE; ul, ol farge: # 333; tekst-transformer: store bokstaver;
MINDRE støtter virkelig ikke arvelige stiler som Sass og Stylus. I stedet for å legge til flere selektorer til et sett med egenskaper, behandler det arv som en blanding uten argumenter og importerer stilene til egne selektorer. Ulempen med dette er at egenskapene gjentas i ditt sammensatte stilark. Slik gjør du det:
.blokkere margin: 10px 5px; polstring: 2px; p .blokk; / * Arve stiler fra '.block' * / border: 1px solid #EEE; ul, ol .block; / * Arve stiler fra '.block' * / color: # 333; tekst-transformer: store bokstaver;
.blokkere margin: 10px 5px; polstring: 2px; p margin: 10px 5px; polstring: 2px; grense: 1px solid #EEE; ul, ol margin: 10px 5px; polstring: 2px; farge: # 333; tekst-transformer: store bokstaver;
Som du kan se, stilene fra .blokkere ble satt inn i selektorer som vi ønsket å gi arven til. Det er viktig å merke seg at prioritet kan bli et problem her, så vær forsiktig.
I CSS-fellesskapet blir det importert CSS på grunn av at det krever flere HTTP-forespørsler. Importerer med en preprosessor fungerer imidlertid annerledes. Hvis du importerer en fil fra noen av de tre preprosessorer, vil det bokstavelig talt inkludere Importen under kompileringen, oppretter bare en fil. Vær oppmerksom på at det importeres regelmessig .css filer kompilerer med standard @import "file.css"; kode. Også, mixins og variabler kan importeres og brukes i ditt hovedformatark. Import gjør det mulig å skape separate filer for organisasjonen.
/ * fil. type * / body background: #EEE;
@import "reset.css"; @import "-filen. type"; p bakgrunn: # 0982C1;
@import "reset.css"; kropp bakgrunn: #EEE; p bakgrunn: # 0982C1;
Fargefunksjoner er bygd i funksjoner som vil forvandle en farge ved kompilering. Dette kan være ekstremt nyttig for å lage gradienter, mørkere svingerfarger og mye mer.
lysere ($ farge, 10%); / * returnerer en farge 10% lettere enn $ farge * / mørkere ($ farge, 10%); / * returnerer en farge 10% mørkere enn $ farge * / saturate ($ color, 10%); / * returnerer en farge 10% mer mettet enn $ farge * / desaturat ($ farge, 10%); / * returnerer en farge 10% mindre mettet enn $ farge * / gråtoner ($ farge); / * returnerer gråskala på $ color * / complement ($ color); / * returnerer komplementfargen på $ color * / invert ($ color); / * returnerer invertert farge på $ color * / mix ($ color1, $ color2, 50%); / * bland $ color1 med $ color2 med en vekt på 50% * /
Dette er bare en kort liste over de tilgjengelige fargefunksjonene i Sass, en fullstendig liste over tilgjengelige Sass-fargefunksjoner kan bli funnet ved å lese Sass-dokumentasjonen.
Fargefunksjoner kan brukes hvor som helst en farge er gyldig CSS. Her er et eksempel:
$ farge: # 0982C1; h1 bakgrunn: $ color; grense: 3px solid mørkere ($ farge, 50%);
lette (@color, 10%); / * returnerer en farge 10% lettere enn @color * / darken (@color, 10%); / * returnerer en farge 10% mørkere enn @color * / saturate (@color, 10%); / * returnerer en farge 10% mer mettet enn @color * / desaturate (@color, 10%); / * returnerer en farge 10% mindre mettet enn @color * / spin (@color, 10); / * returnerer en farge med en 10 grader større i fargetone enn @color * / spin (@color, -10); / * returnerer en farge med en 10 graders mindre nyanse enn @color * / mix (@ color1, @ color2); / * returner en blanding av @ color1 og @ color2 * /
En liste over alle MINDRE funksjonene kan bli funnet ved å lese MINDRE dokumentasjonen.
Her er et eksempel på hvordan du bruker en fargefunksjon i mindre:
@color: # 0982C1; h1 bakgrunn: @color; grense: 3px solid mørkere (@color, 50%);
lysere (farge, 10%); / * returnerer en farge 10% lettere enn 'farge' * / mørkere (farge, 10%); / * returnerer en farge 10% mørkere enn 'farge' * / mettet (farge, 10%); / * returnerer en farge 10% mer mettet enn 'farge' * / desaturat (farge, 10%); / * returnerer en farge 10% mindre mettet enn 'farge' * /
En fullstendig liste over alle Stylus-fargefunksjonene kan bli funnet ved å lese Stylus Documentation.
Her er et eksempel ved hjelp av Stylus-fargefunksjoner:
farge = # 0982C1 h1 bakgrunnsfarge grense 3px solid mørkere (farge, 50%)
Å gjøre matte i CSS er ganske nyttig, og nå fullt mulig. Det er enkelt, og dette er hvordan du gjør det:
kropp margin: (14px / 2); topp: 50px + 100px; høyre: 100px - 50px; venstre: 10 * 10;
Vi har dekket mange funksjoner og nye ting som forprosessorer kan gjøre, men vi har ikke dekket noe praktisk eller praktisk. Her er en kort liste over virkelige applikasjoner der bruk av en preprosessor er en livredder.
Dette er en av de hyped opp grunnene til å bruke en preprocessor og med en veldig god grunn - det sparer masse tid og tårer. Å lage en mixin for å håndtere leverandørprefikser er enkelt og sparer mye repetisjon og smertefull redigering. Slik gjør du det:
@mixin border-radius ($ values) -webkit-border-radius: $ values; -moz-grense-radius: $ verdier; border-radius: $ verdier; div @ include border-radius (10px);
.border-radius (@values) -webkit-border-radius: @values; -moz-grense-radius: @verdier; border-radius: @values; div .border-radius (10px);
border-radius (values) -webkit-border-radius: values; -moz-grense-radius: verdier; grense-radius: verdier; div border-radius (10px);
div -webkit-border-radius: 10px; -moz-grense-radius: 10px; border-radius: 10px;
Faking 3D-tekst ved hjelp av flere tekst-skygger er en smart idé. Det eneste problemet er at bytte farge etter at det er vanskelig og tungvint. Ved å bruke mixins og fargefunksjoner, kan vi lage 3D-tekst og endre fargen på fluen!
@mixin text3d ($ color) farge: $ color; tekstskygge: 1px 1px 0px mørkere ($ farge, 5%), 2px 2px 0px mørkere ($ farge, 10%), 3px 3px 0px mørkere ($ farge, 15%), 4px 4px 0px mørkere ), 4px 4px 2px # 000; h1 font-size: 32pt; @include text3d (# 0982c1);
.text3d (@color) farge: @color; tekstskygge: 1px 1px 0px mørkere (@color, 5%), 2px 2px 0px mørkere (@color, 10%), 3px 3px 0px mørkere (@color, 15%), 4px 4px 0px mørkere (@color, 20% ), 4px 4px 2px # 000; span font-size: 32pt; .text3d (# 0982c1);
tekst3d (farge) farge: farge tekstskygge: 1px 1px 0px mørkere (farge, 5%), 2px 2px 0px mørkere (farge, 10%), 3px 3px 0px mørkere (farge, 15%), 4px 4px 0px mørkere , 20%), 4px 4px 2px # 000 span skriftstørrelse: 32pt text3d (# 0982c1)
Jeg valgte å skrive Stylus tekst-skygger på en linje fordi jeg utelatt de krøllete parentesene.
span font-size: 32pt; farge: # 0982c1; tekstskygge: 1px 1px 0px # 097bb7, 2px 2px 0px # 0875ae, 3px 3px 0px # 086fa4, 4px 4px 0px # 07689a, 4px 4px 2px # 000;
Bruke talloperasjoner og variabler for kolonner er en ide jeg kom opp da jeg først spilte med CSS preprosessorer. Ved å erklære en ønsket bredde i en variabel, kan vi enkelt bytte den nedover veien uten mental matematikk. Slik er det gjort:
$ siteWidth: 1024px; $ gutterWidth: 20px; $ sidebar Bredde: 300px; kropp margin: 0 auto; bredde: $ siteWidth; .content float: left; bredde: $ siteWidth - ($ sidebar Bredde + $ gutterWidth); .sidebar float: left; margin-left: $ gutterWidth; bredde: $ sidebjelke Bredde;
@siteWidth: 1024px; @gutterWidth: 20px; @sidebar Bredde: 300px; kropp margin: 0 auto; bredde: @siteWidth; .content float: left; bredde: @siteWidth - (@ sidebarWidth + @ gutterWidth); .sidebar float: left; margin-venstre: @gutterWidth; bredde: @sidebarWidth;
siteWidth = 1024px; gutterWidth = 20px; sidebarWidth = 300px; kropp margin: 0 auto; bredde: siteWidth; .content float: left; bredde: siteWidth - (sidebar Bredde + gutterWidth); .sidebar float: left; margin-left: gutterWidth; bredde: sidebar Bredde;
kropp margin: 0 auto; bredde: 1024px; .content float: left; bredde: 704px; .sidebar float: left; margin-venstre: 20px; bredde: 300px;
Det er ganske mange quirks å bruke en CSS preprocessor. Jeg kommer til å gå over noen av de morsomme, men hvis du er veldig interessert i å finne dem alle, anbefaler jeg deg å skure dokumentasjonen, eller bedre, bare begynn å bruke en preprosessor i din daglige koding.
Hvis du har skrevet CSS for en anstendig tid, er jeg sikker på at du har nådd et punkt der du hadde en feil et sted og bare ikke kunne finne den. Hvis du er noe som meg, brukte du nok på ettermiddagen å trekke håret ut og kommenterte forskjellige ting for å jage feilen.
CSS preprocessors rapporterer feil. Det er bare så enkelt. Hvis det er noe galt med koden din, forteller det deg hvor, og hvis du er heldig: hvorfor. Du kan sjekke ut dette blogginnlegget hvis du er interessert i å se hvordan feil rapporteres i de forskjellige preprosessorer.
Når du kompilerer med en CSS-forprosessor, blir noen dobbelt-slash-kommentar fjernet (f.eks. //kommentar) og eventuelle slash-asterisk kommentarer forblir (f.eks. /* kommentar */). Når det er sagt, bruk dobbeltstrekk for kommentarer du vil ha på den ikke-sammensatte siden og skråstrek-asterisken for kommentarer du vil ha synlig etter samlingen.
Bare et notat: Hvis du kompilerer minifisert, blir alle kommentarer fjernet.
Hver CSS preprosessor vi dekket (Sass, LESS og Stylus) har sin egen unike måte å utføre den samme oppgaven, noe som gir utviklere muligheten til å bruke nyttige, ikke-støttede funksjoner samtidig som nettleserkompatibiliteten og kodens renhet holdes.
Selv om det ikke er et krav til utvikling, kan preprosessorer spare mye tid og ha noen svært nyttige funksjoner.
Jeg oppfordrer dere alle til å prøve så mange preprosessorer som mulig, slik at du effektivt kan velge en favoritt og vite hvorfor det er begunstiget over de mange andre. Hvis du ennå ikke har prøvd å bruke en preprocessor til å skrive CSS, anbefaler jeg at du gir den en prøve.
Har du en favoritt CSS preprocessor-funksjon jeg ikke nevnte? Er det noe man kan gjøre som en annen ikke kan? Gi oss beskjed i kommentarene nedenfor!
En spesiell takk til Karissa Smith, en super talentfull venn av meg som skapte forhåndsvisningsminiaturen for denne artikkelen.
Accentsconagua