Variáveis Sass

Variáveis Sass

As variáveis são uma maneira de armazenar informações que você pode usar novamente no futuro.

Através do Sass, você podeinformaçãoarmazenados em variáveis, por exemplo:

• string
• número
• cor
• booleano
• lista
• null

O Sass usa o símbolo $ seguido do nome para declarar variáveis:

Sintaxe das variáveis Sass:

$variablename: value;

O exemplo a seguir declara 4 variáveis:

• myFont
• myColor
• myFontSize
• myWidth

Após declarar as variáveis, você pode usá-las em qualquer lugar:

Sintaxe SCSS:

$myFont: Helvetica, sans-serif;
$myColor: vermelho;
$myFontSize: 18px;
$myWidth: 680px;
body {
  font-family: $myFont;
  font-size: $myFontSize;
  cor: $myColor;
}
#container {
  width: $myWidth;
}

Portanto, quando o arquivo Sass é transpilado, ele usa as variáveis (myFont, myColor, etc.) e gera CSS comum e coloca os valores das variáveis no CSS, conforme abaixo:

Saída CSS:

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  cor: vermelho;
}
#container {
  width: 680px;
}

Alcance das variáveis Sass

As variáveis Sass estão disponíveis apenas no nível de nesting onde foram definidas.

Por favor, veja o exemplo a seguir:

Sintaxe SCSS:

$myColor: vermelho;
h1 {
  $myColor: verde;
  cor: $myColor;
}
p {
  cor: $myColor;
}

<p> A cor do texto dentro da etiqueta será vermelha ou verde? Será vermelha!

Outra definição, $myColor: verde; está localizada <h1> dentro da regra, e apenas lá disponível!

Portanto, a saída CSS será:

Saída CSS:

h1 {
  cor: verde;
}
p {
  cor: vermelho;
}

Bom, isso é o comportamento padrão de escopo das variáveis.

Usar Sass !global

Pode-se usar !global Alterar o comportamento padrão de escopo das variáveis.

!global indica que a variável é global, o que significa que pode ser acessada em todos os níveis.

Veja o exemplo a seguir (igual ao acima, mas adicionado !global）：

Sintaxe SCSS:

$myColor: vermelho;
h1 {
  $myColor: verde !global;
  cor: $myColor;
}
p {
  cor: $myColor;
}

Agora <p> A cor do texto dentro da etiqueta será verde!

Portanto, a saída CSS será:

Saída CSS:

h1 {
  cor: verde;
}
p {
  cor: verde;
}

Dica:Deve ser definida fora de qualquer regra. A prática recomendada é definir todas as variáveis globais em seu próprio arquivo, chamado "_globals.scss", e usar @include Palavras-chave contidas neste arquivo.