Variabili Sass

Variabili Sass

Una variabile è un modo per memorizzare informazioni che puoi utilizzare in seguito.

Attraverso Sass, puoi memorizzareinformazionememorizzati nelle variabili, ad esempio:

• stringa
• numero
• colore
• valore booleano
• elenco
• null

Sass utilizza il simbolo $ seguito dal nome per dichiarare variabili:

Sintassi delle variabili Sass

$nomevariabile: valore;

Ecco un esempio che dichiara 4 variabili:

• myFont
• myColor
• myFontSize
• myWidth

Dopo aver dichiarato le variabili, puoi usarle in qualsiasi posizione:

Sintassi SCSS:

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
  famiglia del carattere: $myFont;
  dimensione del carattere: $myFontSize;
  color: $myColor;
}
#container {
  larghezza: $myWidth;
}

Quindi, quando il file Sass viene tradotto, utilizza le variabili (myFont, myColor, ecc.) e produce CSS normale e inserisce i valori delle variabili nel CSS, come segue:

Output CSS:

body {
  famiglia del carattere: Helvetica, sans-serif;
  dimensione del carattere: 18px;
  color: red;
}
#container {
  larghezza: 680px;
}

Intervallo delle variabili Sass

Le variabili Sass sono disponibili solo al livello di annidamento in cui sono definite.

Ecco un esempio sottostante:

Sintassi SCSS:

$myColor: red;
h1 {
  $myColor: green;
  color: $myColor;
}
p {
  color: $myColor;
}

<p> Il colore del testo all'interno del tag sarà rosso o verde? È rosso!

Un'altra definizione, $myColor: green; si trova in <h1> all'interno delle regole e disponibile solo lì!

Quindi, l'output CSS sarà:

Output CSS:

h1 {
  color: green;
}
p {
  color: red;
}

Bene, questo è il comportamento predefinito dello scoping delle variabili.

Usare Sass !global

Puoi usare !global Override il comportamento predefinito di scoping delle variabili.

!global indicazione che la variabile è globale, il che significa che può essere acceduta a tutti i livelli.

Vediamo un esempio (lo stesso dell'altro, ma con l'aggiunta di !global）：

Sintassi SCSS:

$myColor: red;
h1 {
  $myColor: green !global;
  color: $myColor;
}
p {
  color: $myColor;
}

Ora <p> Il colore del testo all'interno del tag sarà verde!

Quindi, l'output CSS sarà:

Output CSS:

h1 {
  color: green;
}
p {
  color: green;
}

Suggerimento:Le variabili globali dovrebbero essere definite al di fuori di ogni regola. È una buona pratica definire tutte le variabili globali in un proprio file, chiamato "_globals.scss", e utilizzare @include Le parole chiave includono questo file.