You are currently viewing Como utilizar variáveis CSS

Como utilizar variáveis CSS

  • Post author:
  • Post category:CSS

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:

variaveis css

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

Este conteúdo te ajudou de alguma forma?