Share
Pentru capabilități scalabile, hărțile Sass sunt o binecuvântare. Extragerea configurației din logica unui modul este o metodă excelentă de structurare. Permiteți-mi să vă explic de ce cred că Sass Maps este cea mai bună caracteristică în Sass 3.3.
Sass 3.3 a fost disponibil în toată lumea pentru o perioadă de timp, dar multe dintre caracteristicile sale din lumea reală sunt încă necunoscute multor dezvoltatori. Noua versiune a lui Sass ne-a adus un nou tip de date numit Hartă. Hărțile stocă o colecție de perechi cheie / valoare și ne ajută să creăm zone de configurare mici pentru o bază de coduri simplificată.
Pentru a fi cu noi vom acoperi elementele de bază ale utilizării Sass Maps, apoi mai târziu vom analiza câteva cazuri de utilizare.
Iată o scurtă trecere în revistă a sintaxei pentru o hartă sassy. Începeți cu un nume de variabilă ($ hartă în acest caz) și apoi introduceți câteva chei cu valori, separate prin virgule, toate în brațe:
$ map: (cheie: valoare, nextkey: nextvalue);
După păstrarea mai multor perechi de chei / valoare la un moment dat, va trebui să preluați aceste informații. Dacă trebuie să găsiți valoarea unei chei, utilizați funcția harta-get (). Vom trece doi parametri: numele hărții și apoi cheia.
.element: înainte de conținut: map-get ($ map, key);
După compilație, producția va fi după cum urmează:
.element: înainte de content: value;
Este foarte recomandabil să folosiți o manipulare solidă a erorilor în procesul de dezvoltare Sass. Pentru asta Sass ne oferă funcția Harta-are-cheie (). Acest ajutor arată dacă există o cheie și dacă nu furnizează o altă ieșire pentru a avertiza dezvoltatorul.
Aruncați o privire la această Introducere în Manipularea erorilor în Sass de Hugo Giraudel pentru un mod minunat de a gestiona erorile.
$ map: (cheie: valoare, nextkey: nextvalue); .element @if harta-has-cheie ($ map, key) content: 'Harta are această cheie.'; @else content: 'Harta nu are această cheie.';
Rezultat:
.element content: 'Harta are această cheie.';
Timp bonus: Sass ne permite să fuzionăm împreună două sau mai multe hărți. Veți afla cumva acum, așa că aruncați o privire la acest exemplu de utilizare harta-îmbinare () funcţie:
$ culori: (lumină: #ccc, întuneric: # 000); $ brand-culori: (principal: roșu, alternativă: albastru); // Mergeți hărțile $ fuzionate: map-merge ($ culori, $ brand-culori); .element conținut: map-get ($ fuzionat, alternativă);
Rezultatul:
.element conținut: albastru;
Am acoperit Cum, acum să ne uităm la Unde.
Hărțile pot fi, de asemenea, utile fără funcțiile de însoțire. De exemplu, puteți efectua o buclă prin harta dvs., definiți parametrii cu valorile pe care le așteptați și apoi adăugați numele hărții Sass. Făcând acest lucru este posibil să lucrăm cu diferite valori.
În acest exemplu sunt afișat clase pentru afișarea icoanelor. Am pus-o Nume a pictogramei ca cheie, lăsând valoarea pentru a stoca realitatea conţinut (pe care l-am adăuga prin pseudo elemente).
Notă: Într-un scenariu din lumea reală, vom declara mai întâi câteva stiluri de bază, dar acest lucru depășește scopul acestui tutorial.
/ * Definiți harta Sassy numită $ icons * / $ icons: (bifați: a, plus: b, minus: c); / * Pentru fiecare cheie din hartă, a creat o clasă proprie * / @each $ name, valoarea $ în icoane $ .icon - # $ name content: $ value;
Ieșirea vorbește de la sine:
/ * Pentru fiecare cheie din hartă, a creat o clasă proprie * / .icon - marcaj content: "a"; .icon - plus conținut: "b"; .icon - minus conținut: "c";
Aceasta este o modalitate foarte eficientă de a scoate sarcini de clase pentru icoane. Există și mai multe cazuri de utilizare - să ne uităm la unele.
Deplasând-o, este posibil să se dea o cheie mai mult decât o valoare. Acest lucru se face prin utilizarea de decupaje și introducerea mai multor valori cu un separator de virgule. Aceasta, de exemplu, ar putea fi excelentă pentru a transfera stiluri pentru variantele unui modul.
Aici voi schita o serie de butoane. Prima valoare pentru fiecare cheie este pentru culoare de fundal iar al doilea este pentru font-culoare.
Apoi am prins cheile cu obiectul așteptat $ culori. Primesc valoarea primei chei din acest obiect nth ($ culori, 1) (începeți cu numele obiectului și apoi poziția valorii solicitate). Dacă aveți nevoie de a doua valoare, atunci veți intra 2.
// _m-buttons.scss $ butoane: (eroare: (# d82d2d, # 666), succes: (# 52bf4a, #fff), avertisment: (# c23435, #fff)); .m-butonul display: inline-block; padding: .5em; fundal: #ccc; culoare: # 666; @ fiecare $ nume, $ culori în $ butoane $ bgcolor: nth ($ colors, 1); $ fontcolor: nth ($ culori, 2); & - # $ nume fundal-culoare: $ bgcolor; culoare: $ fontcolor;
Rezultatul:
.butonul m display: inline-block; padding: .5em; fundal: #ccc; culoare: # 666; .m-buton - eroare background-color: # d82d2d; culoare: # 666; .m-buton - succes background-color: # 52bf4a; culoare: #fff; .m-buton - avertizare background-color: # c23435; culoare: #fff;
Nu știu nici un dezvoltator de front-end care nu sa luptat cu z-index la un moment dat. Problemele apar de obicei din pierderea unei imagini de ansamblu dacă trebuie să le utilizați z-index în mai multe locuri dintr-un proiect. Sass hărțile ne pot ajuta.
Sa incepem cu strat $ ca harta. Cheile ar trebui să fie numite logic, astfel încât să știți care este valoarea pentru care element - poate offcanvas, cutie de lumină, scapă jos etc.
// _config.scss $ layer: (offcanvas: 1, lightbox: 500, dropdown: 10, tooltip: 15); // _m-lightboxes.scss Funcționarea stratului ($ name) @pentru hartă-cheie-cheie ($ layer, $ name) @return map-get ($ layer, $ name); @warn "Cheia # $ name nu se află în hartă" $ layer ""; @return null; ; .m-lightbox z-index: strat (cutie de lumină);
Aici am scris o funcție pentru a obține valoarea unei chei specifice, dar de ce am făcut asta? Răspunsul este, din fericire, simplu: este mai rapid decât scrierea harta-get () de fiecare data. Un alt aspect pozitiv este că puteți crea o gestionare a erorilor și să oferiți dezvoltatorului un mic feedback despre motivul pentru care nu se întâmplă nimic.
Aceasta este rezultatul:
.m-lightbox z-index: 500;
Fiecare proiect are propriul fișier de configurare; elementele de bază pentru utilizarea la nivel mondial. De exemplu, în proiectele mele, definesc câteva valori pentru proprietățile fonturilor: font-color, fonturi alternative, font-family sau font-size. Am creat o variabilă pentru fiecare proprietate, dar o hartă ar fi mai bună.
Iată un exemplu rapid, pentru a începe cu vechi soluţie:
$ base-font-color: # 666; $ base-font-family: Arial, Helvetica, Sans-Serif; $ base-font-size: 16px; $ înălțimea liniei de bază: 1,4;
Apoi nou soluție folosind o hartă Sass:
// _config.scss $ font: (culoare: # 666, familie: (Arial, Helvetica), dimensiune: 16px, înălțime linie: 1.4); // _presets.scss corp culoare: map-get ($ font, color); font-family: map-get ($ font, familie); font-size: map-get ($ font, dimensiune); linie înălțime: map-get ($ font, line-height);
Îmi place acest caz de utilizare. Este minunat să ai o zonă pentru punctele de întrerupere care sunt în întregul tău proiect. Deci, ca și secțiunea despre manipularea cu z-index, aveți o prezentare generală a tuturor punctelor de întrerupere utilizate. Dacă schimbați valoarea acolo, veți schimba comportamentul pe parcursul întregului proiect. Minunat.
Deci, să începem cu o hartă chemată $ breakpoints.
Scopul nostru este de a utiliza puncte de întrerupere cu nume implicite în locul valorilor de pixeli tari într-un element. Din acest motiv avem nevoie de un amestec care va scoate valoarea numelui declarat. Am sunat la mixin răspunde la și treci $ breakpoint ca parametru. Cu valoarea $ Primesc valoarea punctului de așteptare așteptat și o introduc mai târziu în interogarea media.
// hartă cu multe puncte de întrerupere $ breakpoints: (mic: 320px, mediu: 600px, mare: 768px); // Response-To Mixin @mixin răspuns-la ($ breakpoint) @if hartă-has-cheie ($ breakpoints, $ breakpoint) valoarea $: map-get ($ breakpoints, $ breakpoint); ecranul @media și (min-width: valoarea $) @content; @ avertizează "Necunoscut" # $ breakpoint "în $ breakpoints";
Exemplu:
// Sass .m-tabs fundal-culoare: # f2f2f2; @ includ răspunsul la (mediu) background-color: # 666; // Output .m-tabs fundal-culoare: # f2f2f2; ecranul @media și (min-width: 600px) background-color: # 666;
Acest caz de utilizare este unul dintre preferatele mele!
Lucrurile devin puțin mai înșelătoare acum. Să ne uităm la hărți imbricate-minunat pentru schemele de culori cu o gamă de tonuri.
Harta noastră Sass primește numele în acest caz $ Schemă de culori și are obiecte cu chei și valori. Proiectul are tonuri de gri diferite, dar nu vrem să declarăm o variabilă pentru fiecare. Așa că adăugăm un obiect gri, adăugați decupaje și apoi tastele cu valori.
Începeți cu o hartă ca aceasta:
// Schema de culori $ colors:: (baza: #ccc, lumina: # f2f2f2, intunecata: # 666), maro: (baza: # ab906b, lumina: # ecdac3, intunecata: # 5e421c));
Acum, să adăugăm funcția setcolor pentru o modalitate mai scurta de a obtine culoarea dorita. Prima valoare estimată este obiectul hărții Sass (schema de $) - în acest exemplu ar putea fi gri sau maro. Al doilea parametru este culoarea dorită (ton de $) - valoarea implicită pentru aceasta fiind cheia baza.
// Funcția noastră pentru utilizarea mai scurtă a map-get (); @set setcolor (schemă $, ton $: bază) @ return map-get (map-get ($ colorscheme, $ scheme), $ ton);
În cele din urmă, iată un exemplu despre modul în care o puteți utiliza și despre cum obțineți diferitele culori din harta imbricată. E mai ușor decât crezi (poate)!
// Sass. Element culoare: setcolor (maro); . element - lumină culoare: setcolor (maro, lumină); // Element de ieșire color: # ab906b; . element - lumină culoare: # ecdac3;
Ai terminat provocarea. Acum puteți să creați o paletă fără să vă balonați codul cu prea multe variabile pentru fiecare tip de culoare.
Pentru această tehnică, am fost inspirat de Tom Davies și vă recomandăm să verificați articolul său despre această problemă.
Acum ceva pentru utilizatorii Sass avansați. În cadrul proiectelor este adesea o cerință de a crea diferite tipuri de teme cu aceeași bază de coduri. Deci, aici este o propunere de a stabili o temă-clasă în partea de sus a documentului pentru a aplica un aspect specific. Avem nevoie de un obiect în care să putem gestiona numele de teme și să setăm diferite stiluri pentru modul.
Începeți cu o hartă Sass și definiți temele la nivel global pentru proiectul dvs. Valoarea este numele și clasa, pe care trebuie să le adăugați la element. În acest exemplu am creat harta $ teme cu două variante: temă-lumină și temă-întuneric.
// _config.scss $ temele: (tema1: tema-lumina, tema2: tema-intuneric);
Acum avem nevoie de o funcție pentru un mod rapid de obținere a valorilor modulelor. Este un ajutor scurt și are nevoie de trei parametri. Acestea sunt:
Accentsconagua
$ hartă: Definiți numele hărții de unde provin toate valorile.$ obiect: În acest caz cheia pentru temă.$ stil: Proprietatea pentru stilul necesar.// _functions.scss @funcția setStyle ($ map, $ object, $ style) @if hartă-are-cheie ($ map, object object) @return map-get , stilul $); @warn "Cheia" # $ object nu este disponibilă în hartă. "; @return null;
Acum creați o nouă hartă Sass numită $ config. Fiecare temă devine un obiect și numele trebuie să fie aceeași cheie pe care o definiți $ teme: dacă nu veți primi o eroare.
// _m-buttons.scss // 1.Config $ config: (tema1: (fundal: # f2f2f2, culoare: # 000), tema2: (fundal: # 666, culoare: #fff));
În cele din urmă partea cu puțină magie. Începem cu un modul cum ar fi .m-buton și apoi vrem să creăm un aspect diferit în fiecare temă. Deci folosim @fiecare cu cheie $ și valoarea $ ca valorile așteptate pe care le primim de pe hartă $ teme. Acum, Sass bate prin cheile de pe hartă și creează ceva pentru fiecare temă.
La începutul acestei secțiuni am menționat că este necesar ca cheile să fie identice în fiecare hartă ($ teme și $ config). Prin urmare, trebuie să verificăm dacă harta $ config are cheia de pe hartă $ teme, astfel încât să utilizați funcția Harta-are-cheie (). Dacă cheia este disponibilă, procedați în continuare, altfel aruncați o eroare pentru a informa dezvoltatorul.
// _m-buttons.scss // 2.Base .m-butonul @ fiecare cheie $, valoare $ in teme $ daca harta-has -key ($ config, $ key) . # $ value background: setStyle ($ config, $ cheie, fundal); culoare: setStyle ($ config, $ cheie, culoare); @else @warn "Cheia" # cheie $ nu este definită în harta $ config ""
După tot codul scris, să aruncăm o privire asupra rezultatului. Este superba faptul ca zona de configurare este separata de logica modulului.
.temă-lumină .m-buton background: # f2f2f2; culoare: # 000; butonul .theme-dark .m (fundal: # 666; culoare: #fff;
În cele din urmă, este timpul să-l încercați singur. Poate că această soluție nu funcționează pentru dvs. și aveți nevoie de o altă soluție, dar în toate sper că vă va ajuta să vă mențineți bine codul. Puteți juca cu acest exemplu pe Codepen:
În ochii mei, hărțile Sass erau cea mai bună caracteristică pentru a fi introduse în Sass 3.3. Personal, simt că sunt o modalitate excelentă de a oferi fundației o mai bună structură și de a crea zone mici de configurare. Sass hărțile ușurează manipularea și schimbarea valorilor fără a afecta logica întregii baze de date. Începeți să le folosiți astăzi, colegii dvs. vor fi recunoscători!
Dacă utilizați deja hărți Sass, anunțați-ne cum le folosiți în proiectele dvs.!
