Variáveis CSS

Variáveis CSS

A função var() é usada para inserir os valores das variáveis CSS.

As variáveis CSS podem acessar o DOM, o que significa que você pode criar variáveis com escopo local ou global, usar JavaScript para modificar variáveis e alterar variáveis com base em consultas de mídia.

Uma boa maneira de usar variáveis CSS envolve cores de design. Você pode colocá-las em variáveis, sem precisar copiar e colar a mesma cor várias vezes.

Método tradicional

O exemplo a seguir mostra a maneira tradicional de definir algumas cores na tabela de estilos (definindo a cor para cada elemento específico a ser usado):

Exemplo

body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}
button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}

Experimente você mesmo

Sintaxe da função var()

A função var() é usada para inserir os valores das variáveis CSS.

A sintaxe da função var() é a seguinte:

var(name, value)
Valor Descrição
name Obrigatório. Nome da variável (começa com dois traços).
value Opcional. Valor de fallback (usado quando a variável não for encontrada).

Notas:O nome da variável deve começar com dois traços (--) e é case-sensitive!

Como funciona var()

Primeiro: As variáveis CSS podem ter escopo global ou local.

As variáveis globais podem ser acessadas e usadas em todo o documento, enquanto as variáveis locais podem ser usadas apenas dentro do seletor onde foram declaradas.

Para criar variáveis com escopo global, declare-as no seletor :root. O seletor :root coincide com o elemento raiz do documento.

Para criar variáveis com escopo local, declare-as no seletor onde serão usadas.

O exemplo a seguir é o mesmo que o anterior, mas aqui usamos a função var().

Primeiro, declaramos duas variáveis globais (--blue e --white). Em seguida, usamos a função var() para inserir os valores das variáveis mais tarde na tabela de estilos:

Exemplo

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Experimente você mesmo

A utilização de var() tem as seguintes vantagens:

  • Torna o código mais fácil de ler (maior facilidade de compreensão)
  • Faz a modificação de valores de cor mais fácil

Se desejar alterar o azul e branco para tons mais suaves, basta modificar os valores de duas variáveis:

Exemplo

:root {
  --blue: #6495ed;
  --white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Experimente você mesmo

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Função
var() 49.0 15.0 31.0 9.1 36.0

Função var() CSS

Função Descrição
var() Insira o valor da variável CSS.