Share
Ved å bruke preprosessorer som Sass, har LESS og Stylus alltid gitt utviklere mer kontroll over stilarkene sine, men innfødte CSS stopper gradvis gapet. CSS-funksjoner som variabler, calc og mixins er bare toppen av isfjellet; la oss se på hva preprosessorer for tiden hjelper oss med, og hvordan innfødt CSS logikk skal endre hvordan vi gjør ting.
Grafisk fra Brother Typeface på Envato ElementsSpråkabstraksjoner som Sass, LESS og Stylus blåste opp utviklernes verdener ved å gi dem variabler, mixins, funksjoner, strekker seg og mye mer. Disse preprosessorer fyllte i manglende funksjoner som CSS ikke kunne gi.
CSS bør imidlertid ikke lenger betraktes som "logisk-mindre" uten tilstedeværelse av intellekt. Med CSS på farten for å forfine seg, er vi allerede i gang med å få glimt av fremtiden - en fremtid som vil konkurrere med preprosessorer.
Vanligvis forbinder vi "mixins" med preprosessorer, grupper av CSS-deklarasjoner som du kan gjenbruke gjennom et prosjekt. En mixin kan brukes som en frittstående hjelper, eller du kan passere verdier som argumenter for å gjøre det mer fleksibelt.
Her er en Sass @mixin eksempel kalt skriftstørrelse.
@mixin font-size ($ size, $ base) font-size: $ size; // fallback for gamle nettlesere skriftstørrelse: ($ size / $ base) * 1rem;
Ovennevnte mixin vil akseptere argumenter for $ størrelse og $ basen, og den brukes i en @inkludere erklæring med evnen til å justere argumenter avhengig av konteksten.
/ * Sass Call * / body @ include font-size (14, 16); / * CSS-utgang * / kropp font-size: 14px; fontstørrelse: 0.875rem;
Resultatet er a rem basert verdi for skriftstørrelse med en px fallback for nettlesere som ikke støtter rem. Preprocessor mixins som dette har lagret utviklere utallige timer gjennom årene.
Native CSS mixins er for øyeblikket et redigeringsutkast, men har også en implementering i Chrome. Hvis du allerede har spilt med CSS-variabler, vil følgende utdrag se ganske kjent ut.
: root --pink-tema: bakgrunn: # F64778;
Vær oppmerksom på at koden ovenfor vil mest definitivt gjøre syntaxen din høyttaler gå bonkers. Denne måten å skrive en CSS-mixin bruker, er en ny på-regel som heter @søke om, ligner på det vi vet i Sass som @inkludere.
kropp @apply -pink-tema;
Akkurat som vi er kjent med Sass bruker @inkludere, vi kunne til slutt ha @søke om for CSS!
Du kan prøve dette eksperimentet for deg selv i Chrome ved å aktivere et flagg under chrome: // flags / # enable-eksperimentelle-web-plattform-funksjoner.
Husker når preprosessorer var de eneste stilverktøyene som er i stand til matematisk gymnastikk? Vel, det er ikke tilfelle lenger. Med calc (), vi kan ta disse irriterende tallene og mutere dem til nye verdier basert på ønsket aritmetikk.
nav margin: calc (1rem - 2px) calc (1rem - 1px);
Dette er skjønnheten i calc (); det strekker seg til slutt CSS krefter inn i stratosfæren. Foretrekker tillegg? Subtraksjon? Inndeling? Multiplikasjon? Calc kan håndtere alt det og mer.
Hvis du vil lese mer om calc (), W3C-spesifikasjonen har alt du trenger for å gjøre deg døsig og glad samtidig. Nettleserstøtte er også rockfast, i henhold til Kan jeg bruke.
Innfødte variabler for CSS er endelig her. De er et ekte og konkret alternativ for utviklere, selv om det tok litt tid å lære fra forprosessorer.
Her ser Sass variabel syntaks ut:
$ spacing-enhet: 20px; main margin: $ spacing-unit; polstring: $ spacing-enhet;
Sass-variabler er betegnet med en dollar $ signere, men i CSS ser de litt annerledes ut:
: root --primary-color: skyblue; nav.primary bakgrunn: var (- primærfarge);
CSS-variabler er betegnet med en dobbel bindestrek -- og er vanligvis plassert inne :rot for global tilgang, selv om deres omfang kan strammes ved å plassere dem i spesifikke selektørdeklarasjoner.
div color: var (- my-var, rød);
Variabler kan til og med akseptere en tilbakebetalingsverdi hvis de ennå ikke er definert, slik det er tilfellet med eksemplet ovenfor. Browserstøtte er heller ikke dårlig, med kant som viser delvis støtte. Spesifikasjonen er også i kandidat anbefalingsfasen for leselydelsen.
Nesting er en funksjon i mange forprosessorer som lar deg plassere selektorer innsiden en eksisterende erklæring. Nesting i Sass ser typisk ut som dette:
ul margin: 20px auto; li font-size: 12px; en tekst-dekorasjon: ingen;
Nesting kan bli uhåndterlig og få deg pakket inn i massevis av problemer, noe som resulterer i umulig lange selekjeder. Av denne grunn er det tilrådelig å holde fast ved begynnelsesregelen og holde nesting til ikke mer enn tre eller fire nivåer dypt.
Mens nesting kan være farlig, kan det også være nyttig hvis du tar deg tid til å være oppmerksom. Her er et snakk om hvordan det til slutt kan se etter innfødt CSS:
/ * CSS Nesting * / nav color: # 222; & .primary bakgrunn: maroon; / * Resultat * / nav color: # 222; nav.primary bakgrunn: maroon;
Akkurat som vi er vant til hos våre preprocessor-allierte, gir innfødte CSS-nesting oss de samme prinsippene, men uten å måtte kompilere språket. Det er et utkast til spesifikasjon av Tab Atkins på denne svært funksjonen for Native CSS nesting.
"Utvider" er en annen måte å passere egenskaper og verdier rundt, dele dem mellom deklarasjoner. I Sass har vi blitt vant til å bruke følgende syntaks:
.melding border: 1px solid #ccc; polstring: 10px; farge: # 333; .success @extend .message; border-farge: grønn; .ror @extend .message; border-farge: rød; .Warning @extend .message; border-color: gul;
Du kan se at vi begynner med å definere stiler for .budskap, og tilbyr deretter tre varianter med forskjellige grense farger. Hver variant først strekker .budskap, derved arve alle stilregler, før du endrer grensefarge.
Identisk syntaks til eksemplet ovenfor er det som blir utarbeidet av Tab Atkins som en annen potensiell spesifikasjon for innfødt CSS. Uansett om du er enig med, strekker du ut (en funksjon hvis fordeler diskuteres varmt), det er flott å se CSS-omsorgspersoner omfavne ideer fremmet av forprosessorer.
Hvis du noen gang finner deg selv ved hjelp av fargemanipuleringsfunksjoner for forprosessorer, vil du sette pris på denne funksjonaliteten i innfødt CSS. Fargemodus () -funksjonen tar en eksisterende farge og gjelder null eller flere "fargejustere" som angir hvordan man skal manipulere sluttresultatet.
nav bakgrunn: color-mod (# 79d3e2 nyanse (360) metning (100%));
Utviklingen er i de tidlige stadiene, og mens det finnes polypyfills, endres syntaxen ofte (dagens farge-mod pleide å være farge, for eksempel).
Tyler Gaw laget et veldig pent verktøy (colorme.io) som lar deg eksperimentere med alle mulige fargejustere som er tilgjengelige.
colorme.ioSpec for funksjonen color-mod () er i øyeblikket i utkastmodus gjennom CSS-arbeidsgruppen.
På samme måte som jQuery bidro til å gjøre nettet bedre, så har det faktisk preprosessorer når det gjelder CSS. Språk som Sass har bidratt til å bane vei for nye ideer og tilnærminger som ennå ikke er vurdert av CSS-spesifikke forfattere.
Jeg håper de nye funksjonene vi har snakket om, inspirerer deg til å bruke dem i ditt eget arbeid; Jeg oppfordrer deg til å vurdere å bruke innfødt funksjonalitet over en preprosessor når det er mulig!
Accentsconagua