Módulo 12: Variáveis CSS (Custom Properties)
2. Resumo da Aula Anterior
No Módulo 11, aprendemos a usar Pseudo-classes e Pseudo-elementos para tornar o site interativo. Agora, vamos aprender a organizar o nosso código como profissionais usando variáveis.
3. O Que Vais Aprender Hoje
- ✅ O que são Custom Properties.
- ✅ Como declarar variáveis globais no :root.
- ✅ Como aplicar variáveis com a função var().
- ✅ Criar temas (Dark Mode simples) com variáveis.
4. Teoria: O Balde Central de Cores
Conceito: Variáveis CSS permitem que guardes um valor (como uma cor ou um tamanho) num nome específico. Se precisares de mudar a cor de 50 botões diferentes, basta mudares o valor da variável original no topo do ficheiro.
🧪 Analogia: A Mistura de Tinta
Imagina que estás a pintar uma casa:
- Sem Variáveis: Tens de andar com latas de tinta diferentes para cada quarto. Se decidires mudar o azul por verde, tens de re-pintar cada parede individualmente.
- Com Variáveis: Tens um sistema de tubos central onde misturas a cor uma única vez. Se mudares a cor no Tanque Central, todas as paredes da casa mudam de cor instantaneamente através dos tubos!
5. Exemplos Práticos
Exemplo 1: Declaração e Uso
O local correto para as tuas variáveis.
:root {
--primary-color: #3498db;
--main-padding: 20px;
}
.card {
background-color: var(--primary-color);
padding: var(--main-padding);
}O prefixo -- é obrigatório para o CSS entender que é uma variável tua.
Exemplo 2: Valores de Backup (Fallback)
O que acontece se a variável não existir?
/* Se --bg-color não estiver definida, usa 'white' */
body {
background-color: var(--bg-color, white);
}Podes passar um segundo valor dentro do var() como segurança.
6. Agora é a Tua Vez!
Vamos criar o teu primeiro "Sistema de Design":
- No teu CSS, cria o seletor
:root. - Cria uma variável
--cor-destaquecom um laranja vibrante. - Cria outra
--fonte-principalcom 'Inter' ou 'Arial'. - Aplica estas variáveis em vários elementos (h1, p, botões).
- Agora, muda apenas o valor no
:roote observa como todo o site se transforma de uma só vez!
7. Verificação de Conhecimento
8. Resumo do Que Aprendemos
- 📌 :root é o melhor sítio para variáveis globais.
- 📌 Variáveis começam sempre com --.
- 📌 Usamos a função var() para ler os valores.
- 📌 Facilitam a manutenção e a consistência visual do projeto.
9. Desafios Práticos
Desafio 1: Herança
Se definires uma variável dentro de uma .div, os elementos dentro dessa div podem usá-la? E os elementos fora?
Desafio 2: Cálculos com Variáveis
Podes usar variáveis dentro de um calc()? (Ex: calc(var(--base) * 2))
Desafio 3: Dark Mode Express
Como farias para mudar as cores do site para um tema escuro apenas mudando uma classe no body?