Share
Per i front-end scalabili, le mappe Sass sono una benedizione. Estrarre la configurazione dalla logica di un modulo è un ottimo metodo per strutturare. Lascia che ti spieghi perché penso che le mappe di Sass siano la migliore funzionalità di Sass 3.3.
Sass 3.3 è stato alla portata di tutti per un po 'di tempo, ma molte delle sue caratteristiche del mondo reale sono ancora sconosciute a molti sviluppatori. La nuova versione di Sass ci ha portato un nuovo tipo di dati chiamato carta geografica. Le mappe contengono una serie di coppie chiave / valore e ci aiutano a creare piccole aree di configurazione per una base di codice semplificata.
Per stare con noi copriremo le basi dell'utilizzo di Sass Maps, quindi in seguito vedremo alcuni casi d'uso.
Ecco una rapida panoramica della sintassi per una mappa sfacciata. Inizia con un nome di variabile ($ mappa in questo caso) e quindi inserire alcune chiavi con valori, separati da virgole, il tutto racchiuso tra parentesi graffe:
$ map: (chiave: valore, nextkey: nextvalue);
Dopo aver memorizzato più coppie chiave / valore, a un certo punto è necessario recuperare tali informazioni. Se è necessario trovare il valore di una chiave, utilizzare la funzione mappa-get (). Passeremo due parametri: il nome della mappa e quindi la chiave.
.element: before content: map-get ($ map, key);
Una volta compilato, l'output sarà il seguente:
.element: before content: value;
È fortemente consigliabile utilizzare la gestione degli errori solidi nel processo di sviluppo di Sass. Per questo Sass ci dà la funzione map-ha-chiave (). Questo helper controlla se esiste una chiave e se non fornisce un altro output per avvisare lo sviluppatore.
Dai un'occhiata a questa Introduzione a Error Handling in Sass di Hugo Giraudel per un fantastico modo di gestire gli errori.
$ map: (chiave: valore, nextkey: nextvalue); .element @if map-has-key ($ map, key) content: 'Map ha questa chiave.'; @else content: 'Map non ha questa chiave.';
Risultato:
.elemento contenuto: 'Mappa ha questa chiave.';
Tempo bonus: Sass ci consente di unire due o più mappe insieme. Stai imparando a farlo ora, quindi dai un'occhiata a questo esempio di come usare il map-merge () funzione:
$ colors: (light: #ccc, dark: # 000); $ brand-colors: (main: red, alternative: blue); // Unisci mappe $ uniti: mappa unione ($ colori, $ colori di marca); .element content: map-get ($ unito, alternativo);
Il risultato:
.elemento contenuto: blu;
Abbiamo coperto il Come, ora diamo un'occhiata al dove.
Le mappe possono anche essere utili senza le relative funzioni. Ad esempio è possibile eseguire un ciclo attraverso la mappa, definire i parametri con i valori che ci si aspetta e quindi aggiungere il nome della mappa Sass. In questo modo è possibile lavorare con diversi tipi di valori.
In questo esempio sto emettendo le classi per visualizzare le icone. Ho messo il nome dell'icona come chiave, lasciando il valore per memorizzare l'attuale soddisfare (che poi aggiungeremo tramite pseudo elementi).
Nota: In uno scenario reale dovremmo prima dichiarare alcuni stili di base, ma questo va oltre lo scopo di questo tutorial.
/ * Definisci la Sassy Map chiamata $ icons * / $ icons: (segno di spunta: a, più: b, meno: c); / * Per ogni chiave nella mappa, ha creato una propria classe * / @each $ nome, $ valore in $ icone .icon - # $ name contenuto: $ valore;
L'output parla da solo:
/ * Per ogni chiave nella mappa, ha creato una propria classe * / .icon - segno di spunta contenuto: "a"; .icon - plus content: "b"; .icon - minus content: "c";
Questo è un modo davvero efficace per generare carichi di classi per le icone. Ci sono molti altri casi d'uso, diamo un'occhiata ad alcuni.
Andando avanti, è possibile dare una chiave più di un valore. Questo viene fatto usando ritagli e inserendo più valori con un separatore di virgola. Questo, ad esempio, potrebbe essere ottimo per trasferire gli stili per le varianti di un modulo.
Qui ho intenzione di stilare una serie di pulsanti. Il primo valore per ogni chiave è per il colore di sfondo e il secondo è per il colore del carattere.
Quindi faccio un giro tra le chiavi con l'oggetto atteso $ colori. Prendo il valore della prima chiave in questo oggetto con ennesimo ($ colori, 1) (inizia con il nome dell'oggetto e quindi la posizione del valore cercato). Se hai bisogno del secondo valore, allora entrerai 2.
// _m-buttons.scss $ pulsanti: (errore: (# d82d2d, # 666), successo: (# 52bf4a, #fff), avviso: (# c23435, #fff)); .m-button display: blocco in linea; imbottitura: .5em; sfondo: #ccc; colore: # 666; @each $ name, $ colors in $ buttons $ bgcolor: nth ($ colors, 1); $ fontcolor: nth ($ colors, 2); & - # $ name background-color: $ bgcolor; colore: $ fontcolor;
L'output:
.Pulsante m display: blocco in linea; imbottitura: .5em; sfondo: #ccc; colore: # 666; .m-button - error background-color: # d82d2d; colore: # 666; .m-button - success background-color: # 52bf4a; colore: #fff; .m-button - warning background-color: # c23435; colore: #fff;
Non conosco un singolo sviluppatore front-end che non abbia mai lottato con z-index ad un certo punto. I problemi di solito derivano dalla perdita di una panoramica se è necessario utilizzare z-index in più posti in un progetto. Le mappe Sass ci possono aiutare.
Iniziamo con $ strato come la mappa. Le chiavi dovrebbero essere denominate logicamente in modo da sapere quale valore è per quale elemento - forse offcanvas, lightbox, cadere in picchiata eccetera.
// _config.scss $ layer: (offcanvas: 1, lightbox: 500, dropdown: 10, tooltip: 15); // _m-lightboxes.scss @function layer ($ name) @if map-has-key ($ layer, $ name) @return map-get ($ layer, $ name); @warn "La chiave # $ nome non si trova nella mappa '$ layer'"; @return null; ; .m-lightbox z-index: layer (lightbox);
Qui ho scritto una funzione per ottenere il valore di una chiave specifica, ma perché l'ho fatto? La risposta è fortunatamente semplice: è più veloce della scrittura mappa-get () ogni volta. Un altro aspetto positivo è che puoi creare una gestione degli errori e dare allo sviluppatore un piccolo feedback sul perché non sta succedendo nulla.
Questo è l'output:
.m-lightbox z-index: 500;
Ogni progetto ha il proprio file di configurazione; basi per l'utilizzo globale. Per esempio nei miei progetti definisco alcuni valori per le proprietà dei font: font-color, font-color alternativo, font-family o font-size. Ero solito creare una variabile per ogni proprietà, ma una mappa sarebbe stata migliore.
Ecco un rapido esempio, per iniziare con vecchio soluzione:
$ base-font-color: # 666; $ base-font-family: Arial, Helvetica, Sans-Serif; $ base-font-size: 16px; $ base-line-height: 1.4;
Poi il nuovo soluzione utilizzando una mappa Sass:
// _config.scss $ font: (color: # 666, family: (Arial, Helvetica), dimensione: 16px, line-height: 1.4); // _presets.scss body color: map-get ($ font, color); font-family: map-get ($ font, famiglia); font-size: map-get ($ font, size); line-height: map-get ($ font, line-height);
Amo questo caso d'uso. È superbo avere un'area per i punti di interruzione presenti nell'intero progetto. Quindi, come la sezione sulla gestione con z-index, hai una panoramica di tutti i breakpoint usati. Se modifichi il valore lì, modifichi il comportamento durante il tuo progetto. Eccezionale.
Quindi iniziamo con una mappa chiamata $ breakpoint.
Il nostro obiettivo è utilizzare i punti di interruzione con nomi impliciti anziché valori di pixel rigidi in un elemento. Per questo motivo abbiamo bisogno di un mixin che emetterà il valore del nome indicato. Ho chiamato il mixin rispondere a e passare $ breakpoint come parametro Con $ value Ottengo il valore del punto di rottura atteso e lo inserisco più tardi nella query multimediale.
// Mappa con molti breakpoint $ breakpoints: (small: 320px, medium: 600px, large: 768px); // Respond-To Mixin @mixin respond-to ($ breakpoint) @if map-has-key ($ breakpoint, $ breakpoint) $ valore: map-get ($ breakpoints, $ breakpoint); @media screen e (min-width: $ value) @content; @warn "Unknown '# $ breakpoint' in $ breakpoints";
Esempio:
// Sass .m-tabs background-color: # f2f2f2; @include respond-to (medium) background-color: # 666; // Output .m-tabs background-color: # f2f2f2; @media screen e (min-width: 600px) background-color: # 666;
Questo caso d'uso è uno dei miei preferiti!
Le cose stanno diventando un po 'più complicate ora. Guardiamo mappe nidificate-fantastico per combinazioni di colori con una gamma di toni.
La nostra mappa Sass in questo caso prende il nome $ colorscheme e ha oggetti con chiavi e valori. Il progetto ha diversi toni di grigio, ma non vogliamo dichiarare una variabile per ognuno. Quindi aggiungiamo un oggetto grigio, aggiungere ritagli e quindi le chiavi con valori.
Inizia con una mappa come questa qui:
// Schema di colori $ colorscheme: (grigio: (base: #ccc, luce: # f2f2f2, scuro: # 666), marrone: (base: # ab906b, luce: # ecdac3, scuro: # 5e421c));
Ora aggiungiamo la funzione setColor per un modo più breve per ottenere il nostro colore di scelta. Il primo valore atteso è l'oggetto della mappa Sass (schema di $) - in questo esempio potrebbe essere grigio o Marrone. Il secondo parametro è il colore che vuoi ($ tono) - il valore predefinito per questo è la chiave base.
// La nostra funzione per l'utilizzo più breve di map-get (); @funzione setcolor ($ schema, $ tone: base) @return map-get (map-get ($ colorscheme, $ scheme), $ tone);
Infine, ecco un esempio di come puoi usarlo e come ottenere i diversi colori dalla mappa nidificata. È più facile di quanto pensi (forse)!
// Sass .element color: setcolor (brown); .element - light color: setcolor (brown, light); // Output .element color: # ab906b; .element - light color: # ecdac3;
Hai completato la sfida. Ora puoi creare una tavolozza senza gonfiare il tuo codice con troppe variabili per ogni tipo di colore.
Per questa tecnica sono stato ispirato da Tom Davies e ti consiglio di dare un'occhiata al suo articolo sull'argomento.
Ora qualcosa per gli utenti avanzati di Sass. Nei progetti è spesso necessario creare diversi tipi di temi con la stessa base di codice. Quindi, ecco una proposta per impostare una classe tema nella parte superiore del documento per applicare un aspetto specifico. Abbiamo bisogno di un oggetto in cui possiamo gestire il nome dei temi e impostare i diversi stili per il modulo.
Inizia con una mappa Sass e definisci i temi a livello globale per il tuo progetto. Il valore è il nome e la classe, che devi aggiungere al file elemento. In questo esempio ho creato la mappa $ temi con due varianti: theme-light e theme-scuro.
// _config.scss $ themes: (theme1: theme-light, theme2: theme-dark);
Ora abbiamo bisogno di una funzione per ottenere rapidamente i valori dei moduli. È un aiuto breve e ha bisogno di tre parametri. Questi sono:
Accentsconagua
$ mappa: Definisci il nome della mappa da cui provengono tutti i valori.$ oggetto: In questo caso la chiave per il tema.$ stile: La proprietà per lo stile che è necessario.// _functions.scss @function setStyle ($ map, $ object, $ style) @if map-has-key ($ map, $ object) @return map-get (map-get ($ mappa, $ oggetto) , $ stile); @warn "La chiave" # $ object non è disponibile nella mappa. "; @return null;
Ora crea una nuova mappa Sass chiamata $ config. Ogni tema ottiene un oggetto e il nome deve essere la stessa chiave in cui si definisce $ temi: se non ottieni un errore.
// _m-buttons.scss // 1.Config $ config: (theme1: (background: # f2f2f2, color: # 000), theme2: (background: # 666, color: #fff));
Finalmente la parte con un po 'di magia. Iniziamo con un modulo come .m-button e quindi vogliamo creare un aspetto diverso in ogni tema. Quindi usiamo @ogni con $ chiave e $ value come valori attesi che otteniamo dalla mappa $ temi. Ora Sass scorre le chiavi nella mappa e crea qualcosa per ogni tema.
All'inizio di questa sezione ho detto che è necessario che le chiavi siano le stesse in ogni mappa ($ temi e $ config). Pertanto dobbiamo verificare se la mappa $ config ha la chiave dalla mappa $ temi, quindi usa la funzione map-ha-chiave (). Se la chiave è disponibile fai quanto segue, altrimenti lancia un errore per informare lo sviluppatore.
// _m-buttons.scss // 2.Base .m-button @each $ key, $ valore in $ themes @if map-has-key ($ config, $ chiave) . # $ value & background: setStyle ($ config, $ key, background); color: setStyle ($ config, $ key, color); @else @warn "La chiave '# $ key non è definita nella mappa $ config'"
Dopo tutto il codice scritto, diamo un'occhiata al risultato. È superbo che l'area di configurazione sia separata dalla logica del modulo.
.theme-light .m-button background: # f2f2f2; colore: # 000; .theme-dark .m-button background: # 666; colore: #fff;
Finalmente è il momento di provarlo da solo. Forse questa soluzione non funziona per te e ne hai bisogno di un'altra, ma tutto sommato spero che ti aiuterà a mantenere bene il tuo codice. Puoi giocare con questo esempio su Codepen:
Ai miei occhi, le mappe di Sass erano la migliore caratteristica da introdurre in Sass 3.3. Personalmente, ritengo che siano un ottimo modo per dare alla tua fondazione una struttura migliore e creare piccole aree di configurazione. Le mappe Sass semplificano la gestione e la modifica dei valori senza influire sulla logica dell'intero codebase. Inizia a usarli oggi, i tuoi colleghi ti saranno grati!
Se stai già utilizzando le mappe Sass, facci sapere come le utilizzi nei tuoi progetti!
