Variáveis ​​CSS – A capacidade de produzir efeitos de design dinâmicos e personalizáveis ​​é essencial na área de desenvolvimento web. Propriedades personalizadas, ou variáveis ​​CSS, fornecem um caminho para esse domínio que permite aos desenvolvedores especificar valores reutilizáveis ​​em folhas de estilo e modificá-los dinamicamente durante o tempo de execução. Esta postagem do blog explorará variáveis ​​CSS com um exemplo prático que destaca sua capacidade dinâmica.

Compreendendo as variáveis ​​CSS
Os valores reutilizáveis ​​de uma folha de estilo podem ser definidos e usados ​​usando variáveis ​​CSS. Eles são declarados usando o prefixo — seguido por um nome, normalmente dentro da pseudoclasse :root para disponibilidade global. Elas podem ser usadas para armazenar valores como fontes, cores, largura, altura, etc. Essas variáveis ​​podem até ser usadas em outros arquivos, uma vez definidas no código CSS.(Leia mais)

É assim que uma variável CSS é definida:

:root {
  --main-color: #3498db;
}

Neste exemplo, definimos uma variável chamada –main-color e seu valor é #3498db. Nós a declaramos na pseudoclasse :root, que garante que a variável esteja acessível em qualquer lugar do código CSS.

Como usar variáveis ​​CSS
Uma vez definidas, você pode usar variáveis ​​CSS em qualquer lugar do seu código CSS usando a função var() para acessá-las.

Var():

A variável CSS var() permite que você insira o valor de uma propriedade personalizada para substituir parte do valor de outra propriedade..

Sintaxe:

var(--custom-property);

Exemplo :

.element {
  color: var(--main-color);
}

Neste exemplo, estamos usando a variável –main-color para definir a cor do texto de um elemento. Se você decidir alterar a cor principal posteriormente, tudo o que você pode fazer é atualizar o valor da variável, e ela será refletida automaticamente em todos os elementos onde for usada.

1.Criando cores de tema dinâmicas
Saída

Considere uma situação em que você gostaria de criar uma página da web onde a cor do tema muda dinamicamente. Você deseja fornecer aos usuários a opção de clicar em um botão e ver todo o esquema de cores da página mudar. Vamos ver como as variáveis ​​CSS podem tornar isso possível. (Leia mais sobre variáveis ​​CSS)

HTML:

  
Dynamic Theme - CSS Variables
  
Change Theme Color

  

CSS:

:root {
  --primary-color: #3498db;
}

.header {
  background-color: var(--primary-color);
  color: white;
  padding: 20px;
  text-align: center;
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  margin: 20px;
  border-radius: 5px;
}

Javascript:

document.getElementById('changeColorBtn').addEventListener('click', function() {
  // Generate a random hex color
  var randomColor = '#'   Math.floor(Math.random()*16777215).toString(16);

  // Set the random color as the new primary color
  document.documentElement.style.setProperty('--primary-color', randomColor);
});

Este exemplo mostra uma página da web com um botão e um cabeçalho. A cor de fundo do botão e do cabeçalho são personalizadas usando a variável CSS –primary-color, que tem um valor padrão de #3498db. Um script JavaScript cria um código de cor hexadecimal aleatório ao clicar no botão, que é então atribuído como o novo valor da variável –primary-color. Como resultado, os usuários têm uma experiência interessante e interativa à medida que a cor do tema do botão e do cabeçalho muda dinamicamente.

Conclusão
No desenvolvimento web, as variáveis ​​CSS oferecem um método versátil e eficaz de gerenciamento de estilos. Ao definir valores reutilizáveis ​​e aplicá-los dinamicamente, os desenvolvedores podem criar sites mais fáceis de manter e personalizáveis. As variáveis ​​CSS fornecem um extenso conjunto de ferramentas para melhorar os recursos de estilo de seus projetos on-line, seja o foco em temas, capacidade de resposta ou animação. Para utilizá-los totalmente em seus designs, comece a integrá-los ao seu fluxo de trabalho CSS! (Leia mais sobre a variável CSS)