Variabile în SASS

Limbajul SASS permite utilizarea variabilelor. O variabilă reprezintă un container, în care se pot stoca date și care pot fi utilizate în locurile necesare din cod.

Pentru a crea o variabilă, trebuie să găsești un nume pentru ea și să pui semnul $ înaintea acestuia. Apoi, după numele variabilei, punem două puncte și specificăm valoarea acestei variabile. Să creăm de exemplu o variabilă cu numele var:

styles.scss$var: 20px;

Să utilizăm acum această variabilă ca valoare a unei proprietăți:

styles.scssp {
  font-size: $var;
}

Ca rezultat, după compilare în CSS, în locul variabilei noastre va fi înlocuită valoarea sa:

styles.cssp {
  font-size: 20px;
}

styles.scss$color: #000;

p {
  color: $color;
}