Recomendação de curso:

Função CSS var()

Definição e uso do CSS var() A função é usada para inserir o valor da variável CSS.

Exemplo

Exemplo 1

Primeiro, declare uma variável global chamada --main-bg-color, e use-a no conjunto de estilos: var() Inserir o valor da variável com a função:

:root {
  --main-bg-color: coral;
}
#div1 {
  background-color: var(--main-bg-color);
}
#div2 {
  background-color: var(--main-bg-color);
}

Experimente você mesmo

Exemplo 2

Outro uso var() Exemplo de inserção de múltiplos valores de variáveis CSS:

:root {
  --main-bg-color: coral;
  --main-txt-color: azul;
  --main-padding: 15px;
}
#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

Experimente você mesmo

Sintaxe do CSS

var(--name, value)

Detalhes técnicos

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente a função pela primeira vez.

Páginas relacionadas

Tutorial:Variáveis do CSS