Variables en SASS

El lenguaje SASS permite usar variables. Una variable representa un contenedor, en el que se pueden almacenar algunos datos y utilizarlos en los lugares necesarios del código.

Para crear una variable, es necesario idear su nombre y anteponer el signo $. Luego, después del nombre de la variable, ponemos dos puntos y especificamos el valor de esta variable. Vamos a crear, por ejemplo, una variable con el nombre var:

styles.scss$var: 20px;

Ahora usemos esta variable como valor de una propiedad:

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

Como resultado, después de la compilación a CSS, en lugar de nuestra variable se sustituirá su valor:

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

styles.scss$color: #000;

p {
  color: $color;
}