Variáveis CSS – A função var()

Índice

    Mostrar índice

Variáveis CSS

A função var() é usada para inserir o valor de um Variável CSS.

Variáveis CSS têm acesso ao DOM, o que significa que você pode criar variáveis com escopo local ou global, altere as variáveis com JavaScript e altere as variáveis com base em consultas de mídia.

Uma boa maneira de usar variáveis CSS é quando se trata das cores do seu projeto. Em vez de copiar e colar as mesmas cores repetidamente, você pode coloque-os em variáveis.

A maneira tradicional

O exemplo a seguir mostra a forma tradicional de definir algumas cores em uma folha de estilo (definindo as cores a utilizar, para cada elemento específico):

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 →

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h1>The Traditional Way</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

Sintaxe da função var()

A função var() é usada para inserir o valor de um Variável CSS.

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

 var(--name, value)
name

Obrigatório. O nome da variável (deve começar com dois travessões)

value

Opcional. O valor de fallback (usado se a variável não for encontrada)

Nota: O nome da variável deve começar com dois travessões (--) e diferencia maiúsculas de minúsculas!

Como funciona var()

Em primeiro lugar: as variáveis CSS podem ter escopo global ou local.

Variáveis globais podem ser acessadas/usadas em todo o documento, enquanto variáveis locais podem ser usadas apenas dentro do seletor onde são declaradas.

Para criar uma variável com escopo global, declare-a dentro de :root seletor. O seletor :root corresponde ao elemento raiz do documento.

Para criar uma variável com escopo local, declare-a dentro do seletor que irá utilizá-la.

O exemplo a seguir é igual ao exemplo acima, mas aqui usamos a função var().

Primeiro, declaramos duas variáveis globais (--blue e --white). Então, usamos o Função var() para inserir o valor das variáveis posteriormente na folha de estilo:

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 →

<!DOCTYPE html>
<html>
<head>
<style>
: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;
}
</style>
</head>
<body>

<h1>Using the var() Function</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

As vantagens de usar var() são:

  • torna o código mais fácil de ler (mais compreensível)

  • torna muito mais fácil alterar os valores das cores

Para mudar a cor azul e branco para um azul e branco mais suave, você só precisa para alterar os dois valores de 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 →

<!DOCTYPE html>
<html>
<head>
<style>
: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;
}
</style>
</head>
<body>

<h1>Using the var() Function</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

Suporte ao navegador

Os números na tabela especificam a primeira versão do navegador que suporta totalmente o Função var().

Function
var() 49.0 15.0 31.0 9.1 36.0

Função CSS var()

var()

Insere o valor de uma variável CSS