Variáveis do Sass

Declaração e uso

Variáveis servem para guardar algum dado, como uma cor ou a altura de um elemento, por exemplo. A sintaxe de definição delas é quase igual à sintaxe de definição de propriedades de CSS. A diferença é que o nome da variável é precedido por $. Elas também são acessadas com o $ antes do nome delas. Exemplo de declaração e uso de uma variável:

$main-color: blue;

body {
    color: $main-color;
}

body {
  color: blue; }

Escopo

No exemplo anterior, a variável $main-color foi declarada fora de qualquer seletor. Isso faz com que ela seja global e esteja disponível em qualquer parte do arquivo. Também é possível declarar uma variável dentro de um seletor. Nesse caso, ela será uma variável local e só estará disponível dentro do seletor. Exemplo:

body {
    $main-color: blue;
    color: $main-color;
}

header {
    background-color: $main-color;
}

Se você tentar compilar esse estilo, vai ver o seguinte erro:

O que esse erro informa é que a variável não existe, porque ela só existe dentro do seletor onde ela foi declarada. A exceção a essa regra ocorre quando a flag !global é usada na declaração da variável:

body {
    $main-color: blue !global;
    color: $main-color;
}

header {
    background-color: $main-color;
}

body {
  color: blue; }

header {
  background-color: blue; }

Perceba que agora o estilo compila normalmente, porque a variável foi definida como global por causa da flag !global.

Valores padrões

A flag !default é usada para atribuir valores padrões à variáveis. Ela pode ser passada quando um valor é atribuído a alguma variável. O valor só será atribuído se a variável não tiver nenhum valor. Exemplo:

$paragraph-color: blue !default;
$paragraph-color: red !default;

p {
  color: $paragraph-color;
}

p {
  color: blue; }