Variabler i SASS

Språket SASS tillåter användning av variabler. En variabel representerar en container, där man kan lagra viss data och använda den på de ställen i koden där det behövs.

För att skapa en variabel måste du hitta på ett namn och sätta tecknet $ före det. Sedan efter variabelnamnet sätter vi ett kolon och anger värdet på denna variabel. Låt oss till exempel skapa en variabel med namnet var:

styles.scss$var: 20px;

Låt oss nu använda denna variabel som värde för en egenskap:

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

Som ett resultat efter kompilering till CSS kommer vårt variabelvärde att substitueras istället för variabeln:

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

styles.scss$color: #000;

p {
  color: $color;
}