Share
Nettutviklingssamfunnet har nylig mottatt noen store nyheter. Selv om det ikke er nattklubbene, er eksperimenter igjen på gang, noe som vil gi oss opprinnelig støtte for CSS-variabler, mixins og moduler i nettlesere. Spørsmålet er, men dette er en god ting?
Før vi går frem, husk at disse utviklingen fortsatt er bare i forsøksfasen. De har ikke blitt implementert i en nettleser ennå.
Hvis du er beskjedent kjent med CSS preprosessorer, som Mindre eller SASS, har du en grunnleggende forståelse av hva du kan forvente av disse tilleggene. (Det er sagt, det foreslåtte syntakset er dessverre litt annerledes.) I fremtiden vil du kunne lage variabler (globalt og lokalt) og mixins, som du kan tenke på som en samling av stylinger som lett kan være refererte.
Så lenge jeg kan huske, har fellesskapet vært clamoring for CSS variabler; så hva var hold-up? I et ord: uenighet. Faktisk, tilbake i 2008, lurte webkit rundt med denne funksjonen - til og med for å implementere den i nattklubber - men forslaget ble ikke lenge etter. Mange følte at morphing CSS til en mer programmerer-lignende Språket ville bare introdusere frustrasjon; Noen mente enda at det kunne forvirre designere. Hvis for eksempel den primære fargen i prosjektet ditt er lagret i en variabel - antagelig øverst på stilarket ditt - ville det kreve at designeren refererer til to steder.
@myColor: rød;
/ * Mindre syntaks * / #someElem farge: @myColor;
Selv om dette argumentet i noen grad er gyldig, holder det ikke mye vekt. De fleste designere opprettholder et sett av site-farger øverst på stilarket, som de bruker som referanse. Introduksjon av variabler for å inneholde disse verdiene er en logisk løsning.
Mindre eller SASS-fans vil være vant til å definere variabler som:
/ * Mindre * / @primary_color: rød; / * SASS * / $ primary_color: rød;
Det foreslåtte syntaks kompliserer litt ved å lage variabler. For eksempel:
/ * Deklarasjon * / @var primary_color farge rød; / * Bruk * / kropp farge: var (primary_color);
Accentsconagua
@var farge søkeord i koden ovenfor. Var funksjon, og passere i variabelnavnet. Jeg må innrømme: det virker litt overflødig å bruke @var direktiv. Syntaxen som SASS og Less bruker synes mer hensiktsmessig og renere. @myVar er mer kortfattet enn @var myVar.
Variabler er et velkomment tillegg, derimot.
Variabler er skrevet. Hver primitiv verdi type, hver eiendom og noen ekstra bekvemmelighetstyper finnes. Dette lar oss avsløre de nye CSSOM-tingene på dem:
document.styleSheets [0] .vars [[primary_color]]. alpha = .5;
-- xanthir.com
Variabler vil også ha mulighet til å bli scoped til en deklarasjonsboks, ved bruk av @local direktiv. Dette kan være nyttig når en variabel bare må brukes en eller to ganger i et prosjekt.
.boks / * Deklarasjon * / @local box_gradient bakgrunn lineær gradient (topp, svart, hvit); / * Bruk * / bakgrunn: var (box_gradient);
Mix-ins kan være utrolig nyttig. Faktisk dekket vi prosessen med å lage en klassefil med blandinger for ikke lenge siden på Nettuts +. Du kan lese om det her - men husk at teknikken (e) presentert i den artikkelen stole på Mindre preprosessoren. De nye forsøkene bruker igjen en litt annerledes syntaks.
/ * Mindre * / .border-radius (@radius: 3px) -webkit-border-radius: @radius; -moz-grense-radius: @radius; border-radius: @radius; / * SASS * / @mixin grense-radius ($ radius: 3px) -webkit-grense-radius: $ radius; -moz-grense-radius: $ radius; border-radius: $ radius; / * Og muligens den native løsningen ?? * / @mixin grense-radius (radiuslengde 3px) -webkit-grense-radius: var (radius); -moz-grense-radius: var (radius); grense-radius: var (radius);
Legg merke til likhetene mellom SASS og den foreslåtte opprinnelige løsningen for mixins. Dette skyldes det faktum at medlemmer av SASS-teamet fungerer som rådgivere.
Som du kanskje er oppmerksom på, tillater Less and SASS deg rede velgere. Dette kan redusere størrelsen på stilarkene dine drastisk, da det fjerner behovet til den samme selgeren gjentatte ganger.
/ * Den nåværende måten * / #content ... #content p ... #content pa ... #content pa: svever ... / * Mindre og SASS * / #content ... p ... a ... & : hover ... / * Og nativt ?? * / #content ... @this> p ... @this> en ... @this: svever ...
Mens den foreslåtte syntaksen er mer ordrike, For sin kreditt har den en fin OO-lignende syntaks, noe som vil gjøre mange utviklere føler seg hjemme.
Men husk - ikke alle designere er utviklere.
Som standard i Mindre er alle variabler - for alle formål og formål - globale. Som et resultat blir det vanskelig å distribuere kode, da eksisterende variabelnavn kan skrives over. Den potensielle innfødte løsningen vil være å implementere moduler eller navneområder. De kan da være inkludert i en blokk ved å legge til @bruk direktiv.
@module Nettsted @var primary_color farge # 292929; @var secondary_color farge blå; @mixin border-radius (radiuslengde 3px) ... border-radius: 3px; / * Feil bruk * / body color: var (primary_color); // Variabelt navn er undefined / * Korrekt * / body @use Site; farge: var (primary_color); // # 292929 (Works)
Som nevnt i begynnelsen av denne artikkelen er dokumentasjonen som er oppført ovenfor, fortsatt i forsøksfasen. Det er mulig - sannsynligvis enda - at syntaksen vil endre seg, basert på din tilbakemeldinger. Så la oss få det. Tenk ideen om innfødte variabler i mixins i CSS deg ... eller skremme deg?
Meg? Vel, jeg er for det. Jeg tror at det foreslåtte syntaksen kunne bruke litt arbeid, da det uten tvil vil skremme designerne blant oss. Når det er sagt, hvis syntaksen ble forenklet litt, er jeg 100% om bord. Hva med deg?
