Variabili in Sass | Spiegato

Sintatticamente fantastici Stylesheet (SASS) pre-Processes CSS e funziona bene con tutte le sue versioni. Migliora la capacità del linguaggio di base sostenendo l'uso di variabili, nidificazione, mixin, eredità, ecc. Se parliamo delle sue variabili, allora sono un ottimo modo per evitare che la scrittura di valori CSS ridondanti ancora. Per saperne di più sulle variabili SASS segui l'articolo fino alla fine.

Variabili in Sass

Le variabili SASS vengono utilizzate per archiviare informazioni che possono essere successivamente utilizzate ovunque nel foglio di stile quando richiesto. Il tipo di informazioni che una variabile SASS può archiviare include colori, numeri, stringhe, elenchi, booleani e null.

Sintassi

$ variablename: variabile valo;

Per dichiarare una variabile SASS, è necessario includere un segno di dollaro ($) seguito dal nome della variabile, dal colon, dal valore della variabile e un punto e virgola.

Esempio
Esploriamo ulteriormente le variabili Sass con l'aiuto di un esempio.

Html

Questo è un po 'di paragrafo.

Questo è un div

Questo è il nostro file HTML in cui abbiamo creato due elementi che sono un paragrafo e un contenitore div. Nel frattempo, il collegamento del file CSS generato a seguito della compilazione del file SASS è stato fornito all'attributo HREF del tag.

Sass

$ fontfam: Verdana, sans-serif;
$ fontsize: 35px;
$ fontColor: Pink;
$ Border: 2px Black solido;
$ imbottitura: 10px;
P
Font-Family: $ fontfam;
Font-size: $ Fontsize;
Colore: $ fontColor;

.Container
imbottitura: imbottitura $;
Border: $ Border;

Questo è il nostro file sass con .Estensione SCSS. Qui abbiamo creato cinque variabili SASS vale a. Una volta dichiarati, stiamo usando queste variabili nel nostro file per modellare i nostri elementi.

CSS

Questo è il nostro file CSS risultante.

Produzione

Gli elementi sono stati disegnati con successo usando le variabili SASS.

Variabili Sass Ambito

Le variabili in SASS possono essere dichiarate ovunque nel documento prima che vengano utilizzate e possono avere un ambito globale o un ambito locale.

Una variabile SASS con un ambito globale viene dichiarata all'inizio del file e successivamente utilizzata nell'intero documento ove richiesto.

Nel frattempo, una variabile SASS con un ambito locale viene dichiarata all'interno di un blocco e può essere utilizzata solo nell'ambito di quel particolare blocco.

Esempio
L'esempio seguente dimostra le variabili SASS con ambito globali e locali.

Sass

$ fontsize: 35px;
$ imbottitura: 10px;
P
Font-Family: $ fontfam;
Font-size: $ Fontsize;
Colore: $ fontColor;

.Container
$ Border: 2px Black solido;
imbottitura: imbottitura $;
Border: $ Border;
Font-size: $ Fontsize;

Questo è lo stesso codice di cui sopra con l'unica differenza che $ fontsize e $ imbottitura sono variabili globali e possono essere utilizzate ovunque nel file, nel frattempo, $ bordo è una variabile locale e può essere utilizzata solo nell'ambito del blocco IT è dichiarato in. Questo codice avrà lo stesso output dimostrato nella sezione precedente. Inoltre, l'output CSS risultante sarà anche la stessa.

Conclusione

Le variabili SASS vengono utilizzate per archiviare informazioni che possono essere successivamente utilizzate ovunque nel foglio di stile quando richiesto. Queste variabili possono archiviare colori, numeri, stringhe, elenchi, booleani e null. Il nome di una variabile SASS deve iniziare con un segno di dollaro ($) e queste variabili possono avere un ambito globale o un ambito locale. Inoltre, questi sono un ottimo modo per evitare che la scrittura di valori CSS ridondanti ancora. L'articolo discute in dettaglio le variabili SASS insieme agli esempi pertinenti.