Variáveis no SASS

A linguagem SASS permite o uso de variáveis. Uma variável representa um contêiner, no qual você pode armazenar alguns dados e usá-los nos lugares necessários do código.

Para criar uma variável, você precisa pensar em um seu nome e colocar o símbolo $ antes dele. Em seguida, após o nome da variável, colocamos dois-pontos e especificamos o valor dessa variável. Vamos como exemplo, criar uma variável com o nome var:

styles.scss$var: 20px;

Agora vamos usar essa variável como o valor de uma propriedade:

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

Como resultado, após a compilação para CSS, em vez da nossa variável, seu valor será substituído:

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

styles.scss$color: #000;

p {
  color: $color;
}