[HTML|JS|CSS] Sass : Zmienne

Bardzo przydatną funkcjonalnością Sass jest możliwość korzystania ze zmiennych w plikach .scss. Dzięki nim, nie musimy  kopiować wartości występujących w wielu miejsach. Wystarczy wprowadzić zmienną, przypisać jej wartość i w każdym miejscu odwoływać się do zmiennej. Przy używaniu jednego koloru w wielu miejscach, znacznie łatwiej będzie w przyszłości zmienić jego wartość. Wartości możemy wyliczać "w locie" poprzez dodawanie, odejmowanie, mnożenie czy dzielenie zmiennych przez stałe, bądź inne zmienne.

Przykładowy kod Sass:

$mybluecolor : #7B68EE;
$colorshift : #010101;

.first-class{
 background-color: $mybluecolor;
}

$mybluecolor : $mybluecolor - $colorshift;

.second-class{
 background-color: $mybluecolor;
}

.third-class{
 background-color: $mybluecolor + #010203;
}

Zostanie przetłumaczony do CSS w następujący sposób:

.first-class {
  background-color: mediumslateblue; }

.second-class {
  background-color: #7a67ed; }

.third-class {
  background-color: #7b69f0; }