Share
Deci te joci cu Sass din când în când. Începi să vă bucurați de ea, deoarece vă satisface majoritatea nevoilor dvs. Dar există un singur lucru pe care nu îl înțelegeți complet: interpolare - introducerea valorilor în alte valori. Ei bine, ai noroc, pentru că astăzi o să arunc o lumină asupra problemei.
Interpolare, denumită adesea ca interpolare variabilă sau substituție variabilă nu este ceva unic pentru Sass. De fapt, îl puteți găsi în mai multe limbi (PHP, Perl, Ruby, Tcl, Groovy, shell-uri Unix ...). Despre noi vorbim de multe ori interpolând o variabilă sau interpolând o expresie. Pentru a spune în mod concis, interpolarea este procesul de evaluare a unei expresii sau a unui șir care conține una sau mai multe variabile, rezultând un rezultat în care variabilele sunt înlocuite cu valorile lor corespunzătoare din memorie.
hm.
Să aruncăm o privire la un exemplu în schimb. Dacă aveți câteva cunoștințe de bază despre PHP, acest lucru ar putea fi mai ușor de înțeles. Să presupunem că doriți să ecou un șir care conține o variabilă. Modul comun este de a face acest lucru:
$ description = "minunat"; ecou "Tuts + este". Descrierea $. "!";
Aceasta nu este o interpolare. Aceasta este string-concatenare. Practic, concatenăm (înlănțuim împreună) trei șiruri: "Tuts + este","minunat" (menționată ca descriere $) și "!". Acum, am putea folosi interpolarea mai degrabă decât concatenarea șirului:
$ description = "minunat"; ecou "Tuts + este $ description!";
Suporturile din jurul variabilei spun ca PHP să imprime valoarea variabilă în cadrul șirului. Rețineți că este nevoie de citate dublă pentru a lucra în PHP (ceea ce este valabil pentru majoritatea limbilor).
Oricum, aceasta este interpolare variabilă / expresie. Indiferent dacă utilizați concatenare sau interpolare este într-adevăr până la tine în acest moment, dar să spunem doar că interpolarea este zahăr sintactic pentru concatenare șir.
Dulce. Să vedem cum funcționează substituția variabilă în Sass.
Numele de variabile Sass, la fel ca în PHP, sunt prefixate cu semnul dolarului ($). Aici, comparația se termină, pentru că atunci când vine vorba de interpolare, Sass și PHP se comportă diferit. Există un motiv bun pentru acest lucru: Sass este construit în Ruby, care îl folosește # pentru substituția expresiei.
În Sass, ați face următoarele:
$ description: "minunat"; @warn "Tuts + este # $ description!";
Rețineți că $ semnul nu este scos din numele variabilei ca în PHP. Variabila este pur și simplu încapsulată în # . De asemenea, merită remarcat că puteți interpola orice tip de variabilă, nu numai șiruri de caractere. De exemplu:
$ răspuns: 42; @warn "Răspunsul la întrebarea ultimă a vieții, Universul și totul este # $ answer.";
Acum, că sunteți conștienți de ce interpolare variabilă este și cum să o faceți în Sass, este timpul să treceți la cazuri de utilizare reală. Pentru prima, vom reutiliza ceea ce am făcut cu @a avertiza directivă, care imprimă conținut la consola.
Să presupunem că aveți o hartă de culori numită $ culori (o hartă este o variabilă care stochează o combinație de perechi cheie / valoare), dar sunteți obosit să tastați map-get ($ culori, ...) de peste si peste din nou, asa ca construiesti un pic culoare() funcția de preluare a culorii cartografiate la orice tastă este trecut. Să scriem împreună elementele de bază:
Accentsconagua
// _config.scss $ culori: ("primar": roșii, "secundar": hotpink); // _function.scss @funcțional ($ cheie) @return map-get ($ culori, $ cheie); / / _component.scss .el background-color: color (primar); Deci este destul de frumos, nu? Acum, doriți să vă avertizați că cheia nu există dacă faceți o greșeală sau încercați să preluați o cheie necunoscută de pe hartă (apropo, ați putea dori să citiți această introducere pentru tratarea erorilor în Sass.) Acest lucru se face prin @a avertiza directivă, în culoare() funcţie.
Funcția de culoare activă (tasta $) @în cazul în care harta nu are-cheie ($ culori, cheia $) @warn "Cheia nu a fost găsită."; @return map-get ($ culori, cheie $);
Nu-i rău. Acum, dacă doriți să identificați ce cheie nu a fost găsită?
Funcția de culoare activă (tasta $) @ dacă nu are-cheie-cheie ($ culori, cheia $) @warn "Cheia" # $ key 'nu a fost găsită. "; @return map-get ($ culori, cheie $);
Boom, interpolare variabilă. apel culoare (awesomeness) va arunca următorul mesaj în consola:
Cheie
awesomenessnu a fost gasit.
E minunat, dar nu știm cu adevărat ce este contextul. Pentru a ne ajuta în viitorul nostru, am putea adăuga numele hărții în mesajul de eroare.
($ key) @if nu harta-has-key ($ culori, cheia $) @warn "Cheia" # $ key "nu a fost gasita in harta culorilor $."; @return map-get ($ culori, cheie $);
În acest caz, din moment ce $ culori nu a fost interpolată, va fi tipărită ca un șir.
Cheie
awesomenessnu se găsește în harta culorilor $.
Până în prezent, am văzut cel mai frecvent caz pentru substituția variabilă: tipărirea conținutului unei variabile într-un șir. Acesta este un exemplu extraordinar, dar mi-a trecut prin minte că există un exemplu și mai bun pentru aceasta: variabilele în funcțiile CSS, de exemplu calc ().
Să presupunem că doriți să dimensionați containerul principal pe baza lățimii barei laterale. Întrucât sunteți un dezvoltator de conștiincios conștiincios, ați stocat această lățime într-o variabilă, astfel încât să puteți face acest lucru:
lățimea barei laterale $: 250px; .main width: calc (100% - lățime bara laterală);
Și apoi surpriză! Nu funcționează. Nu există nici o eroare Sass, dar recipientul dvs. nu este dimensionat corect. Dacă mergeți și inspectați stilurile sale cu DevTools, veți vedea acest lucru - trasată pentru că este nevalidă:
.principală lățime: calc (100% - $ sidebar-width);
Acum să ne gândim: calc () este o funcție CSS, nu o funcție Sass. Aceasta înseamnă că Sass interpretează întreaga expresie un șir. Poți să încerci:
$ type-of-expression: tip-of (calc (100% - $ lățime laterală a barei)); // șir
Pentru că este un șir, nu există niciun motiv pentru Sass să se comporte diferit decât înainte $ culori în a noastră@a avertiza şir. $ Sidebar lățime este considerat a fi un șir regulat, așa că este imprimat ca atare. Dar nu asta vrei, nu? Deci haideți să o interpolam!
.principal lățime: calc (100% - # $ sidebar-width);
Acum, când Sass compilează foaia de stil, va înlocui # $ Sidebar-width cu valoarea asociată$ Sidebar lățime, în acest caz 250px, rezultând următoarea expresie CSS validă:
.principal lățime: calc (100% - 250px);
Misiune indeplinita! Am vorbit despre calc () dar aici este același lucru URL-ul (), liniar gradient (),radial gradient (), cub-bezier () și orice alte funcții native CSS, inclusiv toate pseudo-clasele.
Iată un alt exemplu care utilizează funcțiile CSS:
@ pentru $ i de la 1 la $ max .el: nth-of-type (# $ i) // ...
Acesta este un caz pe care l-ați întâlnit: utilizând a pentru buclă în legătură cu : Nth - * () selectoare. Încă o dată, trebuie să interpolați variabila astfel încât să fie imprimată în CSS de ieșire.
Pentru a rezuma: Sass tratează funcțiile CSS ca șiruri de caractere, cerând astfel să scăpați de orice variabilă folosită în ele pentru a le imprima valoarea în CSS rezultată.
Să mergem cu un alt caz interesant pentru interpolarea variabilă: directivele CSS, cum ar fi @a sustine, @pagină dar cel mai important @mass-media.
Acum, acest lucru are legătură cu modul în care Sass analizează directivele CSS, în special directiva mass-media. Am străpuns codul Sass și în timp ce Ruby meu nu este chiar așa de bun, am reușit să găsesc ceva interesant:
def query_expr interp = interpolare retur interp dacă return interp decât dacă tok (/ \ (/) res = ['('] ss res << sass_script(:parse) if tok(/:/) res << ': ' ss res << sass_script(:parse) end res << tok!(/\)/) ss res end Practic, primele linii aici spun Sass pentru a returna interogarea mass-media dacă există o expresie interpolată sau o eroare dacă nu găsește o bretele de deschidere ((), caz în care ar trebui să continue și să analizeze totul. Să încercăm un exemplu aici:
Valoare $: ecran; Valoarea @media $ // ...
În mod surprinzător, aceasta nu reușește:
CSS nevalid după "@media": interogarea media așteptată (de exemplu, imprimare, ecran, imprimare și ecran) a fost "valoarea $"
După cum arată mesajul de eroare, așteaptă o interogare media. În acest moment, trebuie să interpolați variabila dacă vine imediat după @mass-media şir. De exemplu:
Valoare $: ecran; @media # $ value // ...
Așa cum am dedus mai devreme din escapada Ruby, dacă @mass-media este urmată direct de armături (()), nu mai trebuie să interpolați variabila, deoarece Sass va evalua orice din ele. De exemplu:
Valoare $: 1336px; @media (valoarea maximă: valoarea $) // ...
În acest caz, Sass evaluează expresia (valoarea maximă a lățimii: valoarea $), transformându-l în (max-lățime: 1337px) rezultând un rezultat CSS valid, deci nu este nevoie să scăpați de variabila.
În ceea ce privește De ce Susținătorii Sass o proiectează așa, l-am întrebat pe Nathan Weizenbaum. Iată răspunsul lui:
În general, nu ne place să permitem variabilele brute în locuri unde expresiile SassScript nu pot fi utilizate. Întrebările media sunt un astfel de loc, deoarece SassScript poate fi ambiguu acolo (mai ales hărți).
- Nathan Weizenbaum (@ nex3) 10 iunie 2014
Bine, acesta este ultimul exemplu al unui caz de utilizare în care trebuie să interpolați variabilele Sass: când se utilizează o variabilă ca selector sau ca parte a unui selector. Deși nu ar putea fi un caz de utilizare de zi cu zi, nu este neobișnuit să faci ceva de genul:
Valoare $: personalizat; selector- valoare $ proprietate: valoare;
Din păcate, acest lucru nu funcționează:
CSS nevalid după "selector-": așteptat "", a fost "$ value "
Acest lucru este destul de mult din aceleași motive ca pentru exemplul de interogare media. Sass are propriul mod de a parsa un selector CSS. Dacă întâlnește ceva neașteptat, de exemplu un semn de dolar neegalat, atunci se prăbușește.
Din fericire, rezolvarea acestei probleme este simplă (și cunoașteți soluția până acum): interpolați variabila!
Valoare $: personalizat; selector - # $ value proprietate: valoare;
În final, interpolarea Sass nu este la fel de simplă cum ar părea. Există câteva cazuri în care trebuie să scăpați de variabilele dvs., iar altele unde nu faceți asta. De acolo, aveți două căi de a face lucrurile:
Oricum, sper că v-am ajutat să înțelegeți cum funcționează interpolarea variabilă. Dacă aveți ceva de adăugat, asigurați-vă că aveți acces la comentarii.
