Variáveis CSS, também conhecidas como Custom Properties, permitem que você armazene valores específicos para serem reutilizados ao longo do seu documento CSS. Isso é particularmente útil para valores que você deseja manter consistentes e centralizados, como cores do tema, tamanhos de fonte, e espaçamentos. Variáveis CSS podem ser modificadas em tempo real por meio de JavaScript, aumentando a interatividade e a adaptabilidade do design.

Declarando e Utilizando Variáveis CSS

Para declarar uma variável CSS, você a define dentro de um seletor, geralmente o :root, que é um pseudo-classe que representa o elemento raiz do documento e permite que as variáveis sejam acessíveis globalmente.

Exemplo de Declaração de Variáveis:

:root {
  --cor-primaria: #007bff;
  --cor-secundaria: #6c757d;
  --fonte-primaria: 'Helvetica Neue', sans-serif;
  --padding-padrao: 8px;
  --margem-padrao: 16px;
}

Como Utilizar: Após declarar suas variáveis, você pode utilizá-las em qualquer lugar do seu CSS usando a sintaxe var(--nome-da-variavel).

Exemplo de Uso de Variáveis:

.botao {
  background-color: var(--cor-primaria);
  color: white;
  font-family: var(--fonte-primaria);
  padding: var(--padding-padrao);
  margin: var(--margem-padrao);
}

.fundo {
  background-color: var(--cor-secundaria);
}

Prática com Variáveis CSS

Passo a Passo para um Tema Personalizável:

1. Defina Variáveis Globais: Utilize o seletor :root para definir as cores, fontes, e dimensões que serão usadas em seu site.
2. Aplique as Variáveis: Use as variáveis definidas para estilizar elementos. Isso não só torna o seu CSS mais limpo mas também facilita mudanças globais simplesmente ajustando os valores das variáveis.
3. Experimente Mudanças em Tempo Real: Use JavaScript para alterar os valores das variáveis CSS em resposta a interações do usuário, como mudar o tema de claro para escuro.

Exemplo Interativo: Alternar Temas

<button id="alterarTema">Mudar Tema</button>

document.getElementById('alterarTema').addEventListener('click', function() {
  document.documentElement.style.setProperty('--cor-primaria', '#282c34');
  document.documentElement.style.setProperty('--cor-secundaria', '#c7d2fe');
});

Este script JavaScript altera as cores primária e secundária quando o botão é clicado, demonstrando como variáveis CSS podem ser modificadas dinamicamente para criar temas alternativos ou ajustar a interface baseada na preferência do usuário.

Exercício da Aula:

Replique a Tela Apresentada Pelo Professor.