Share
For skalerbare forenden er Sass Maps en velsignelse. Utvinning av konfigurasjon fra logikken til en modul er en god metode for strukturering. La meg forklare hvorfor jeg tror Sass Maps er den beste funksjonen i Sass 3.3.
Sass 3.3 har vært innenfor all rekkevidde nå, men mange av dens virkelige funksjoner er fremdeles ukjente for mange utviklere. Den nye versjonen av Sass ga oss en ny datatype som heter kart. Kartene inneholder en samling av nøkkel / verdi-par og hjelper oss med å opprette små konfigurasjonsområder for en forenklet kodebase.
For å være med skal vi dekke grunnleggende om å bruke Sass Maps, så ser vi senere på noen brukstilfeller.
Her er en rask oversikt over syntaksen for et sassy kart. Start med et variabelt navn ($ kartet i dette tilfellet), og skriv deretter inn noen taster med verdier, skilt med kommaer, alt innenfor braces:
$ map: (nøkkel: verdi, nextkey: nextvalue);
Etter å ha lagret flere nøkkel / verdi-par på et tidspunkt, må du hente den informasjonen. Hvis du trenger å finne verdien av en nøkkel, bruk funksjonen kart-get (). Vi skal passere to parametere til den: navnet på kartet og deretter nøkkelen.
.element: før innhold: map-get ($ map, key);
Når kompilert er utdataene som følger:
.element: før innhold: verdi;
Det er sterkt anbefalt at du bruker solid feilhåndtering i din Sass-utviklingsprosess. For dette gir Sass oss funksjonen map-har-tasten (). Denne hjelperen ser ut om en nøkkel eksisterer, og hvis ikke, leverer en annen utgang for å advare utvikleren.
Ta en titt på dette En introduksjon til feilhåndtering i Sass av Hugo Giraudel for en fantastisk måte å håndtere feil på.
$ map: (nøkkel: verdi, nextkey: nextvalue); .element @if map-has-key ($ map, nøkkel) innhold: 'Kart har denne nøkkelen.'; @else innhold: 'Kart har ikke denne nøkkelen.';
Resultat:
.element innhold: 'Kart har denne nøkkelen.';
Bonustid: Sass lar oss slå sammen to eller flere kart sammen. Du får tak i dette nå, så ta en titt på dette eksemplet på hvordan du bruker kart-fletting () funksjon:
$ farger: (lys: #cc, mørk: # 000); $ merke-farger: (hoved: rød, alternativ: blå); // Flett kartene $ slått sammen: Kart-flette ($ farger, $ merkevare-farger); .element innhold: map-get ($ fusjonert, alternativt);
Resultatet:
.element innhold: blue;
Vi har dekket hvordan, nå la oss se på hvor.
Kart kan også være nyttig uten de medfølgende funksjonene. For eksempel kan du utføre en sløyfe gjennom kartet, definere parametrene med verdiene du forventer og deretter legge til navnet på Sass Map. Ved å gjøre dette er det mulig å jobbe med ulike typer verdier.
I dette eksemplet skriver jeg ut klasser for å vise ikoner. Jeg legger Navn av ikonet som nøkkel, forlater verdien for å lagre den faktiske innhold (som vi da vil legge til via pseudo-elementer).
Merk: I et ekte scenario ville vi først erklære noen grunnleggende stiler, men det ligger utenfor omfanget av denne opplæringen.
/ * Definer Sassy Map kalt $ ikoner * / $ ikoner: (merk: a, pluss: b, minus: c); / * For hver nøkkel i kartet, opprettet en egen klasse * / @each $ navn, $ verdi i $ ikoner .icon - # $ name content: $ value;
Utgangen snakker for seg selv:
/ * For hver nøkkel i kartet, opprettet en egen klasse * / .icon - merkeliste innhold: "a"; .icon - pluss innhold: "b"; .icon - minus innhold: "c";
Dette er en veldig effektiv måte å skrive ut masse klasser for ikoner. Det er mange flere brukstilfeller også, la oss se på noen.
Fortsett, det er mulig å gi en nøkkel mer enn en verdi. Dette gjøres ved å bruke utklipp og legge inn flere verdier med en komma-separator. Dette kan for eksempel være flott å overføre stiler for varianter av en modul.
Her skal jeg stille en serie knapper. Den første verdien for hver nøkkel er for bakgrunnsfarge og den andre er for skriftfarge.
Så løp jeg gjennom nøklene med det forventede objektet $ farger. Jeg får verdien av den første nøkkelen i dette objektet med nte ($ farger, 1) (start med navnet på objektet og deretter posisjonen til den søkte verdien). Hvis du trenger den andre verdien, vil du legge inn 2.
// _m-buttons.scss $ buttons: (feil: (# d82d2d, # 666), suksess: (# 52bf4a, #fff), advarsel: (# c23435, #fff)); .m-knapp display: inline-block; polstring: .5em; bakgrunn: #ccc; farge: # 666; @each $ navn, $ farger i $ knapper $ bgcolor: nth ($ farger, 1); $ fontcolor: nth ($ farger, 2); & - # $ name bakgrunnsfarge: $ bgcolor; farge: $ fontcolor;
Utgangen:
.m-knapp display: inline-block; polstring: .5em; bakgrunn: #ccc; farge: # 666; .m-knapp - feil bakgrunnsfarge: # d82d2d; farge: # 666; .m-knapp - suksess bakgrunnsfarge: # 52bf4a; farge: #fff; .m-knapp - advarsel bakgrunnsfarge: # c23435; farge: #fff;
Jeg kjenner ikke en eneste utvikler som har endret seg med z-indeksen på et tidspunkt. Problemer oppstår vanligvis ved å miste en oversikt hvis du trenger å bruke z-indeks på flere steder i et prosjekt. Sass kart kan hjelpe oss.
La oss begynne med $ lag som kartet. Nøklene skal være logisk navngitt slik at du vet hvilken verdi er for hvilket element - kanskje offcanvas, lysboks, fall ned etc.
// _config.scss $ layer: (offcanvas: 1, lightbox: 500, dropdown: 10, tooltip: 15); // _m-lightboxes.scss @function layer ($ name) @if map-has-key ($ lag, $ navn) @return map-get ($ lag, $ navn); @warn "Nøkkelen # $ name er ikke i kartet '$ layer'"; @return null; ; .m-lightbox z-index: lag (lightbox);
Her skrev jeg en funksjon for å få verdien av en bestemt nøkkel, men hvorfor gjorde jeg det? Svaret er heldigvis greit: det er raskere enn å skrive kart-get () hver gang. Et annet positivt aspekt er at du kan opprette en feilhåndtering og gi utvikleren en liten tilbakemelding om hvorfor ingenting skjer.
Dette er utgangen:
.m-lysboksen z-indeks: 500;
Hvert prosjekt har sin egen konfigurasjonsfil; grunnleggende for global bruk. For eksempel i mine prosjekter definerer jeg noen verdier for skriftegenskaper: skriftfarge, alternativ skriftfarge, skriftfamilie eller skriftstørrelse. Jeg pleide å opprette en variabel for hver eiendom, men et kart ville være bedre.
Her er et raskt eksempel, for å begynne med gammel løsning:
$ base-font-farge: # 666; $ base-font-familie: Arial, Helvetica, Sans-Serif; $ base-font-size: 16px; $ base-line-høyde: 1,4;
Og så ny løsning ved hjelp av et Sass kart:
// _config.scss $ font: (farge: # 666, familie: (Arial, Helvetica), størrelse: 16px, linjehøyde: 1,4); // _presets.scss body color: map-get ($ font, farge); font-family: map-get ($ font, familie); font-size: map-get ($ font, størrelse); linjehøyde: map-get ($ font, linjehøyde);
Jeg elsker denne brukstilstanden. Det er flott å ha et område for breakpoints som er i hele prosjektet. Så, som seksjonen om håndtering med z-indeks, har du en oversikt over alle bruddspunkter. Hvis du endrer verdien der, end du endrer oppførelsen gjennom hele prosjektet. Rått.
Så la oss starte med et kalt kort $ stoppunkter.
Målet vårt er å bruke breakpoints med implisitte navn i stedet for harde pixelverdier i et element. På grunn av dette trenger vi en mixin som vil utgjøre verdien av det oppgitte navnet. Jeg ringte mixin svare til og passere $ stoppunkt som en parameter. Med $ verdi Jeg får verdien av det forventede bruddpunktet og legger det senere i medieforespørselen.
// Kart med mye breakpoints $ breakpoints: (liten: 320px, medium: 600px, stor: 768px); // Respond-To Mixin @mixin svarer til ($ breakpoint) @if kart-har-nøkkel ($ breakpoints, $ breakpoint) $ verdi: map-get ($ breakpoints, $ breakpoint); @media skjerm og (min-bredde: $ verdi) @content; @warn "Unknown" # $ breakpoint 'i $ breakpoints ";
Eksempel:
// Sass .m-tabs bakgrunnsfarge: # f2f2f2; @include svar til (medium) bakgrunnsfarge: # 666; // Utgang .m-faner bakgrunnsfarge: # f2f2f2; @ media skjerm og (min bredde: 600px) bakgrunnsfargen: # 666;
Denne brukskassen er en av mine favoritter!
Ting blir litt tricker nå. La oss se på nestede kart-fantastisk for fargeskjemaer med en rekke toner.
Vårt Sass kart i dette tilfellet får navnet $ colorscheme og den har objekter med nøkler og verdier. Prosjektet har forskjellige gråtoner, men vi ønsker ikke å erklære en variabel for hver enkelt. Så legger vi til et objekt grå, legg til utklipp og deretter tastene med verdier.
Start med en kart som denne her:
// Fargeskjema $ colorcheme: (grå: (base: #ccc, lys: # f2f2f2, mørk: # 666), brun: (base: # ab906b, lys: # ecdac3, mørk: # 5e421c));
La oss nå legge til funksjonen SetColor for en kortere måte å få vår farge av valg. Den første forventede verdien er objektet til Sass-kartet ($ ordningen) - i dette eksemplet kan det være grå eller brun. Den andre parameteren er fargen du vil ha ($ tone) - standardverdien for dette er nøkkelen utgangspunkt.
// Vår funksjon for kortere bruk av kart-get (); @funksjon setcolor ($ scheme, $ tone: base) @return map-get (map-get ($ colorcheme, $ scheme), $ tone);
Til slutt, her er et eksempel på hvordan du kan bruke den og hvordan du får de forskjellige farger fra det nestede kartet. Det er lettere enn du tror (kanskje)!
// Sass. Element farge: setcolor (brun); .element - lys farge: setcolor (brun, lys); // Output. Element color: # ab906b; .element - light color: # ecdac3;
Du har fullført utfordringen. Nå kan du opprette en palett uten å oppblåse koden med for mange variabler for hver type farge.
For denne teknikken ble jeg inspirert av Tom Davies, og jeg anbefaler at du sjekker ut sin artikkel om saken.
Nå er det noe for avanserte Sass-brukere. I prosjekter er det ofte et krav om å lage forskjellige typer temaer med samme kodebase. Så her er et forslag om å sette en temaklass øverst på dokumentet for å søke et bestemt utseende. Vi trenger et objekt der vi kan håndtere navn på temaer og angi forskjellige stiler for modulen.
Start med et Sass-kart og definer temaene globalt for prosjektet ditt. Verdien er navnet og klassen, som du må legge til element. I dette eksemplet opprettet jeg kartet $ temaer med to varianter: tema-lys og tema-dark.
// _config.scss $ temaer: (tema1: tema-lys, tema2: tema-mørkt);
Nå trenger vi en funksjon for en rask måte å få verdier på modulene. Det er en kort hjelper og trenger tre parametere. Disse er:
Accentsconagua
$ kartet: Definer navnet på kartet der alle verdiene kommer fra.$ objekt: I dette tilfellet nøkkelen til temaet.$ stil: Eiendommen for stilen som trengs.// $ funksjons.scss @funksjon setStyle ($ kart, $ objekt, $ stil) @if kart-nøkkel ($ kart, $ objekt) @return map-get (map-get ($ map, $ object) , $ stil); @warn "Nøkkelen" # $ object er ikke tilgjengelig i kartet. "; @return null;
Opprett nå en ny Sass-kart kalt $ config. Hvert tema får et objekt, og navnet må være den samme nøkkelen som du definerer i $ temaer: Hvis ikke, får du en feil.
// _m-buttons.scss // 1.Config $ config: (tema1: (bakgrunn: # f2f2f2, farge: # 000), tema2: (bakgrunn: # 666, farge: #fff));
Endelig del med litt magi. Vi starter med en modul som .m-knapp og da ønsker vi å skape et annet utseende i hvert tema. Så vi bruker @Hver med $ nøkkel og $ verdi som forventede verdier som vi kommer fra kartet $ temaer. Nå løper Sass gjennom tastene i kartet og skaper noe for hvert tema.
I begynnelsen av denne delen nevnte jeg at det er nødvendig at nøklene er de samme i hvert kart ($ temaer og $ config). Derfor må vi sjekke om kartet $ config har nøkkelen fra kartet $ temaer, så bruk funksjonen map-har-tasten (). Hvis nøkkelen er tilgjengelig gjør du følgende, ellers kaster du en feil for å informere utvikleren.
//mm-buttons.scss // 2.Base .m-knapp @each $ key, $ verdi i $ temaer @if map-has-key ($ config, $ key) . # $ value bakgrunn: setStyle ($ config, $ key, background); farge: setStyle ($ config, $ key, color); @else @warn "Nøkkelen" # $ key er ikke definert i kartet $ config '"
Etter all skriftlig kode, la oss se på resultatet. Det er flott at konfigurasjonsområdet er skilt fra logikken til modulen.
.tema-lys .m-knapp bakgrunn: # f2f2f2; farge: # 000; .theme-dark .m-button background: # 666; farge: #fff;
Endelig er det på tide å prøve det selv. Kanskje denne løsningen ikke virker for deg, og du trenger en annen, men alt i alt håper jeg det vil hjelpe deg med å opprettholde koden din godt. Du kan spille med dette eksempelet på Codepen:
I mine øyne var Sass Maps den beste funksjonen som ble introdusert i Sass 3.3. Personlig føler jeg at de er en fin måte å gi grunnlaget bedre struktur og opprette små konfigurasjonsområder. Sass kart gjør det enklere å håndtere og endre verdier uten å påvirke logikken til hele kodebase. Begynn å bruke dem i dag, dine medarbeidere vil være takknemlige!
Hvis du allerede bruker Sass kart, gi oss beskjed om hvordan du bruker dem i prosjektene dine!
