Share
In questo articolo, daremo un'occhiata più approfondita a variabili e variabili scopo in Sass. Lo scopo di una variabile descrive il contesto in cui è definito e quindi dove è disponibile per l'uso.
Per iniziare, descriverò gli ambiti che Sass supporta. Quindi, spiegherò due indicatori utili che possiamo usare per personalizzare il valore di una variabile. Infine, presenterò brevemente le funzioni disponibili per verificare se una variabile esiste o meno.
Sass supporta due tipi di variabili: Locale variabili e globale variabili.
Per impostazione predefinita, tutte le variabili definite al di fuori di qualsiasi selettore sono considerate variabili globali. Ciò significa che è possibile accedervi da qualsiasi posizione nei nostri fogli di stile. Ad esempio, ecco una variabile globale:
$ bg-color: green;
D'altra parte, le variabili locali sono quelle dichiarate all'interno di un selettore. Più avanti, esamineremo come possiamo personalizzare questo comportamento. Ma per ora, vediamo il nostro primo esempio.
Qui definiamo un mixin e quindi il btn-bg-color variabile al suo interno. Questa è una variabile locale ed è quindi visibile solo al codice all'interno di quel mixin:
@mixin style-button $ btn-bg-color: lightblue; colore: $ btn-bg-color;
Successivamente, possiamo chiamare il mixin come segue:
button @include button-style;
Il CSS risultante:
button color: lightblue;
Immagina, tuttavia, che vogliamo anche usare questa variabile (non il mixin) in un altro selettore:
.wrap background: $ btn-bg-color;
Questo ci darebbe il seguente errore:
Variabile non definita: "$ btn-bg-color".
Era normale, giusto? Abbiamo provato ad accedere a una variabile mixin, che è localmente con scope. Non preoccuparti però, come già detto, risolveremo questo problema in una prossima sezione.
Vale anche la pena ricordare che se dichiariamo una variabile all'interno di un selettore, qualsiasi altro selettore annidato può accedervi. Ecco un esempio:
.avvolgere $ bg-color: red; &: dopo background: lighten ($ bg-color, 10%);
Questo compila per:
.avvolgere: dopo background: # ff3333;
Tuttavia, guarda l'esempio seguente dove definiamo una funzione, quindi usiamo quella funzione insieme a un selettore annidato:
@function my-function () $ text-color: black; @return $ text-color; .wrap color: my-function (); &: after background: $ text-color;
Se proviamo a compilare questo, avremo lo stesso errore discusso prima. Di nuovo, ciò accade perché non possiamo accedere al colore del testo variabile. Non lo è direttamente definito all'interno del selettore genitore, ma all'interno della funzione che il nostro selettore chiama.
Le variabili globali e locali possono avere gli stessi nomi. Per dimostrare questo comportamento, lavoreremo su un quarto esempio:
$ text-color: pomodoro; @mixin button-style $ text-color: lime; colore: $ testo-colore; @mixin link-style $ text-color: black; colore: $ testo-colore;
Qui abbiamo definito tre diverse variabili (colore del testo) con lo stesso nome Il primo è una variabile globale, mentre gli altri due sono locali.
Ecco alcuni stili che ne fanno uso:
button @include button-style; a @include link-style; .wrap background: $ text-color;
E il CSS generato:
pulsante color: lime; a colore: nero; .wrap background: pomodoro;
È quello che ti aspettavi?
Tieni presente che non vedremo questi stili a meno che non ci si compili con la versione corrente di Sass (3.4). Ad esempio, supponendo che usiamo Sass 3.3, il nostro output CSS sarà simile a questo:
pulsante color: lime; a colore: nero; .wrap background: black;
Notare la differenza nel colore di sfondo del .avvolgere selettore. Questo accade perché secondo le versioni precedenti di Sass (lo stesso per LibSass), se ridefiniamo localmente il valore di una variabile globale (ad es.. colore del testo), questo sarà il nuovo valore (globale) della variabile. Quindi, nel nostro esempio gli stili compilati dipendono dall'ordine in cui dichiariamo la variabile e i mixins.
Accentsconagua
predefinito bandieraQuesto flag ci consente di impostare il valore di una variabile nel caso in cui non sia già stata impostata o il suo valore corrente sia nullo (trattato come non assegnato). Per spiegare meglio come possiamo trarne vantaggio in uno scenario reale, supponiamo di avere un progetto con la seguente struttura:
Nome progetto / ├── ... ├── css / │ └── app.css └── scss / ├── _config.scss ├── _variables.scss ├── _mixins.scss └── app.scss
Il app.scss il file assomiglia a questo:
@import "config"; @import "variabili"; @import "mixins"; button @include button-style; // altri stili
Vediamo il contenuto dei file parziali.
Innanzitutto, il variables.scss il file contiene le nostre variabili:
$ btn-bg-color: lightblue! default; $ btn-bg-color-hover: scurisci ($ btn-bg-color, 5%); // più variabili
Notare il predefinito flag assegnato al btn-bg-color variabile.
In secondo luogo, il mixins.scss il file include i nostri mix:
@mixin stile pulsante ($ bg-color: $ btn-bg-color, $ bg-color-hover: $ btn-bg-color-hover) background-color: $ bg-color; // altri stili &: hover background-color: $ bg-color-hover; // altri stili // more mixins
Quindi, il generato app.css il file sarà il seguente:
button color: lightblue; pulsante: hover background-color: # 99cfe0;
Quindi, i nostri pulsanti sono dotati di stili predefiniti. Ma supponiamo che vogliamo avere la possibilità di sovrascriverli applicando i nostri valori personalizzati. Per fare questo, possiamo riassegnare le variabili desiderate (di default) nel config.scss file parziale:
$ btn-bg-color: cioccolato; // più variabili
Impostare il valore di questa variabile su cioccolato risulterà nell'ignorare il valore corrispondente (azzurro) che ha ricevuto il predefinito bandiera. Pertanto, il CSS generato cambia come possiamo vedere di seguito:
bottone colore: cioccolato; pulsante: hover background-color: # bc5e1b;
Nota: nel caso in cui non abbiamo aggiunto il predefinito bandiera al btn-bg-color variabile, il nostro CSS sarebbe, a causa della natura a cascata del CSS, come segue:
button color: lightblue; // stili di passaggio del mouse
globale bandieraQuesto secondo flag ci aiuta a cambiare l'ambito di una variabile locale.
Ricordi l'errore che abbiamo visto nel nostro primo esempio? Bene, è successo perché abbiamo provato a usare il btn-bg-color variabile nel .avvolgere selettore. Modifichiamo il nostro esempio per includere questo nuovo flag. Ecco i nuovi stili:
@mixin style-button $ btn-bg-color: lightblue! global; colore: $ btn-bg-color; pulsante @include stile pulsante; .wrap background: $ btn-bg-color;
Come puoi vedere qui sotto, grazie a questo flag, il CSS si compila senza errori:
button color: lightblue; .wrap background: lightblue;
Il globale flag è utile, ma tenete presente che non è sempre una buona pratica modificare l'ambito di una variabile.
Sass fornisce due funzioni di introspezione per verificare se una variabile esiste o meno. Possiamo usare il variabile esiste e / o global-variabile esiste funzioni per verificare se le nostre variabili locali e / o globali esistono rispettivamente.
Ad esempio, ecco un caso di uso comune in cui definiamo una variabile contenente il percorso assoluto di un carattere Google. Quindi, abbiamo scelto di importare quel tipo di carattere nei nostri fogli di stile, ma solo se la variabile rilevante è stata istanziata.
$ google-font: "http://fonts.googleapis.com/css?family=Alegreya"; @if (global-variable-exists (google-font)) @import url ($ google-font);
Il risultato:
@import url ("http://fonts.googleapis.com/css?family=Alegreya");In questo articolo, ti ho presentato il concetto di scope variabile in Sass. Per rendere le cose più chiare abbiamo esaminato diversi esempi, quindi spero che ora abbiate una buona comprensione di come funziona lo scope. Puoi trovare tutti gli esempi di questo articolo in questo senso di SassMeister e sentiti libero di porre qualsiasi domanda tu possa avere nei commenti!
