Înțelegerea domeniului variabil în Sass

În acest articol, vom examina mai profund variabilele și variabilele domeniu în Sass. Domeniul de aplicare al unei variabile descrie contextul în care este definită și, prin urmare, locul în care este disponibil pentru utilizare.

Pentru a începe, voi acoperi ce scopuri susține Sass. Apoi, voi explica două steaguri utile pe care le putem folosi pentru a personaliza valoarea unei variabile. În cele din urmă, voi prezenta pe scurt funcțiile disponibile pentru a verifica dacă există sau nu o variabilă.

Săsime variabilă Sass

Sass acceptă două tipuri de variabile: local variabile și global variabile.

Implicit, toate variabilele definite în afara oricărui selector sunt considerate variabile globale. Aceasta înseamnă că pot fi accesate de oriunde în foile noastre de stil. De exemplu, iată o variabilă globală:

$ bg-color: verde;

Pe de altă parte, variabilele locale sunt cele care sunt declarate în interiorul unui selector. Mai târziu, vom examina modul în care putem personaliza acest comportament. Dar pentru moment, să vedem primul nostru exemplu.

Aici definim un amestec și apoi un BTN-bg-color variabilă în cadrul acestuia. Aceasta este o variabilă locală și, prin urmare, este vizibilă numai pentru codul din interiorul acelui mixin:

@mixin buton-stil $ btn-bg-color: lightblue; culoare: $ btn-bg-color; 

Apoi, putem numi amestecul după cum urmează:

butonul @ include stilul butonului; 

CSS rezultată:

buton culoare: albastru deschis; 

Imaginați-vă, totuși, că dorim să folosim această variabilă (nu mixin) într-un alt selector:

.înfășurați background: $ btn-bg-color; 

Acest lucru ne-ar da următoarea eroare:

Variabila nedefinită: "$ btn-bg-color".

Asta era de așteptat, nu? Am încercat să accesăm o variabilă mixin, care este specifică local. Nu vă faceți griji însă, așa cum am menționat mai sus, vom remedia această problemă într-o secțiune viitoare.

Nivele selectori

Merită de menționat, de asemenea, că dacă declarăm o variabilă în interiorul unui selector, orice alt selector imbricat îl poate accesa. Iată un exemplu:

.împachetați $ bg-color: roșu; &: după background: lighten ($ bg-color, 10%);  

Aceasta se compilează astfel:

.wrap: după background: # ff3333; 

Cu toate acestea, uitați-vă la exemplul de mai jos unde definim o funcție, apoi utilizați acea funcție împreună cu un selector imbricat:

Funcția mea funcțională @ () $ text-color: negru; @return $ text-color;  .wrap culoare: funcția mea (); &: după background: $ text-color; 

Dacă încercăm să compilam acest lucru, vom obține aceeași eroare discutată anterior. Din nou, acest lucru se întâmplă deoarece nu putem accesa culoarea textului variabil. Nu este direct definită în selectorul părinte, dar în interiorul funcției pe care apelatorul nostru o apelează. 

Nume variabile

Variabilele globale și locale pot avea aceleași nume. Pentru a demonstra acest comportament, vom lucra la un al patrulea exemplu:

$ text-color: roșii; @mixin stilul butonului $ text-color: lime; culoare: $ text-color;  @mixin stil de legătură $ text-color: black; culoare: $ text-color; 

Aici am definit trei variabile diferite (culoarea textului) cu același nume. Prima este o variabilă globală, în timp ce celelalte două sunt locale.

Iată câteva stiluri care le utilizează:

butonul @ include stilul butonului;  @includeți stilul de legătură;  .wrap background: $ text-color; 

Și CSS generat:

butonul color: lime;  a culoare: negru;  .wrap background: tomato; 

Asta vă așteptați?

Rețineți că nu vom vedea aceste stiluri decât dacă compilam cu versiunea curentă a lui Sass (3.4). De exemplu, presupunând că folosim Sass 3.3, ieșirea noastră CSS ar arăta astfel:

butonul color: lime;  a culoare: negru;  .wrap background: black; 

Observați diferența în culoarea de fundal a .împacheta selector. Acest lucru se întâmplă deoarece, conform versiunilor anterioare Sass (aceeași pentru LibSass), dacă redefinim local o valoare a unei variabile globale (de ex.. culoarea textului), aceasta va fi valoarea nouă (globală) a variabilei. Deci, în exemplul nostru stilurile compilate depind de ordinea în care declarăm variabila și mixurile.

Mod implicit steag

Acest steag ne permite să setăm valoarea unei variabile în cazul în care nu a fost deja setată sau valoarea curentă a acesteia nul (tratate ca neasignate). Pentru a explica mai bine cum putem profita de acesta într-un scenariu real, să presupunem că avem un proiect cu următoarea structură:

Proiect-Nume / ├── ... ├── css / │ └── app.css └── SCSS / ├── _config.scss ├── _variables.scss ├── _mixins.scss └── app.scss

app.scss fișierul arată astfel:

@import "config"; @import "variabile"; @import "mixins"; butonul @ include stilul butonului;  // mai multe stiluri

Să vedem conținutul fișierelor parțiale.

În primul rând, variables.scss fișierul conține variabilele noastre:

$ btn-bg-color: albastru! $ btn-bg-color-hover: întunecat ($ btn-bg-color, 5%); // mai multe variabile

Observați Mod implicit steagul alocat BTN-bg-color variabil.

În al doilea rând, mixins.scss fișierul include mixins noastre:

Stilul butonului "mixin" ($ bg-color: $ btn-bg-color, $ bg-color-hover: $ btn-bg-color-hover) // mai multe stiluri &: hover background-color: $ bg-color-hover; // mai multe stiluri // mai multe mixuri

Apoi, generat app.css fișierul va fi după cum urmează:

buton culoare: albastru deschis;  buton: hover background-color: # 99cfe0; 

Deci, butoanele noastre vin cu stiluri implicite. Dar să presupunem că vrem să avem opțiunea de a le suprascrie aplicând valorile personalizate. Pentru a face acest lucru, putem reassign variabilele dorite (implicite) în config.scss fișier parțial:

$ btn-bg-color: ciocolată; // mai multe variabile

Setați valoarea acestei variabile la ciocolată va duce la ignorarea valorii corespunzătoare (albastru deschis) care a primit Mod implicit steag. Prin urmare, modificările CSS generate se pot vedea mai jos:

buton culoare: ciocolată;  buton: hover background-color: # bc5e1b; 

Notă: în cazul în care nu am adăugat Mod implicit pavilion la BTN-bg-color variabilă, CSS ar fi, datorită caracterului cascadă al CSS, după cum urmează:

buton culoare: albastru deschis;  // stiluri de hover

global steag

Acest al doilea steguleț ne ajută să modificăm sfera de aplicare a unei variabile locale.

Vă amintiți eroarea pe care am văzut-o în primul nostru exemplu? Asta sa întâmplat pentru că am încercat să o folosim BTN-bg-color variabilă în .împacheta selector. Să modificăm exemplul nostru pentru a include acest nou steag. Iată cele noi stiluri:

@mixin butonul stil $ btn-bg-color: lightblue global; culoare: $ btn-bg-color;  butonul @ include stilul butonului;  .wrap background: $ btn-bg-color; 

După cum puteți vedea mai jos, datorită acestui steag, CSS se compilează fără nici un fel de erori:

buton culoare: albastru deschis;  .wrap background: lightblue; 

global steagul este util, dar rețineți că nu este întotdeauna o practică bună să modificați domeniul de aplicare al unei variabile. 

Verificarea existenței unei variabile

Sass oferă două funcții de introspecție pentru a testa dacă există sau nu o variabilă. Putem folosi variabilă există și / sau la nivel mondial-variabilă există funcții pentru a verifica dacă variabilele locale și / sau globale există, respectiv.

De exemplu, aici este un caz de utilizare obișnuit unde definim o variabilă care conține calea absolută către un font Google. Apoi, vom alege să importăm acel font în foile noastre de stil, dar numai dacă variabila relevantă a fost instanțiată.

$ google-font: "http://fonts.googleapis.com/css?family=Alegreya"; @if (globală-variabilă-există (google-font)) @import url ($ google-font); 

Rezultatul:

@import url ("http://fonts.googleapis.com/css?family=Alegreya");

Concluzie

În acest articol, v-am prezentat conceptul de domeniu variabil în Sass. Pentru a face lucrurile mai clare, am analizat exemple diferite, deci sperăm că aveți acum o bună înțelegere a modului în care funcționează. Puteți găsi toate exemplele acestui articol în acest gest SassMeister și nu ezitați să puneți întrebări pe care le puteți avea în comentarii!