Introdução
As variáveis CSS são utilizadas para definir um valor que poderá ser utilizado em todo o site ou sistema.
Imagine que você está desenvolvendo algo que tem uma paleta de cores padrão, e em todo lugar precisa colocar as mesmas cores.
Isso pode ser trabalhoso, com o tempo acaba até decorando o hexadecimal da cor padrão, porém se a cor padrão do sistema mudar, será preciso mudar em todos os lugares.
Ou então em outra situação, é possível utilizar variáveis para guardar espaçamentos, tamanhos, fontes e outras coisas.
Dessa forma, utilizar variáveis traz um grande benefício ao desenvolvimento.
Se a cor for alterada por exemplo, será necessário trocar somente em um lugar, e todo o resto do sistema já aplicará a nova cor.
Caso precise mudar algo como o tamanho e fonte da mesma forma, só trocar em um local, facilitando muito na manutenção.
Facilita também para um dev novo na equipe manter o padrão do sistema, seria só instruir como usar as variáveis.
Criar uma variável global
Para criar as variáveis css global, iremos utilizar o seletor raiz de um documento, que é chamado :root.
Criando a variável dentro dele, é possível que ela fique disponível em todo local para ser utilizada.
:root {
--blue: #1e90ff;
}
Criar uma variável local
É possível criar uma variável diretamente dentro de um seletor, porém é menos comum, porque dessa forma não ajuda tanto no reuso.
Mas para realizar essa declaração, é bem similar a primeira, o que difere é trocar o seletor :root, pelo seletor onde ficará a variável local, por exemplo:
#meu-paragrafo {
--blue: #1e90ff;
}
Utilizar variável
Para utilizar essa variável criada no local que desejar, é possível fazer utilizando a função var() do CSS.
Basicamente é passar a variável criada dentro dessa função:
p {
color: var(--blue);
}
E dessa forma o estilo será aplicado corretamente, com a cor definida acima nas variáveis css.
Exemplo prático
Para um exemplo simples, irei estilizar um botão e um texto utilizando variáveis css.
Para o botão, irei colocar uma cor de fundo, cor do texto e espaçamento interno.
Já para o parágrafo irei aumentar o tamanho do texto.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Variáveis CSS</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Este é um texto</p>
<button>Salvar</button>
</body>
</html>
/* style.css */
:root {
--blue: #1e90ff;
--white: #ffffff;
--size-10: 10px;
--font-size-20: 20px;
}
button {
background-color: var(--blue);
color: var(--white);
padding: var(--size-10);
}
p {
font-size: var(--font-size-20);
}
Com esse código, o botão e texto são estilizados dessa forma:
Código fonte
O código fonte desse conteúdo está no meu CodeSandbox, e você pode acessar neste link.
Para ver outros canais onde o posto conteúdo sobre CSS veja os Links do Programando Soluções.
Conclusão
Este exemplo é bem simples, o código é pequeno.
Mas a vantagem das variáveis CSS se encontra em grandes códigos, onde é mais difícil manter um padrão no sistema.
Com isso esse recurso é muito útil, vale a pena por em prática, com certeza faz a diferença no dia a dia.
Referências
https://daily-dev-tips.com/posts/how-to-use-css-vars/
https://www.w3schools.com/css/css3_variables.asp