Reutilize estilos com variáveis CSS
Crie tokens de design com custom properties.
- Definir e aplicar variáveis reutilizáveis de tema.
Custom properties armazenam valores reutilizáveis de cor, espaçamento e outros tokens visuais.
1:root {
2 --brand: #165b33;
3 --surface: #f4f8f5;
4}
5
6.card {
7 color: var(--brand);
8 background: var(--surface);
9}Shared theme values applied to every card
Definir tokens em :root facilita consistência e manutenção em toda a página.
Principais conclusões
Definir e aplicar variáveis reutilizáveis de tema.
Prefira regras simples e reutilizáveis.
Padronize tokens e estados para facilitar evolução visual.
Quiz da aula
5 perguntas · aprovação com 4 acertos · até 50 XP
Ao passar, você conclui a aula e mantém sua sequência. As perguntas erradas voltarão em sessões de revisão.
Pratique: escreva código em CSS
Estilize a página de exemplo, veja as mudanças na prévia isolada e execute verificações nos estilos calculados.
Tematize um card com tokens
Defina --brand: #165b33 e --surface: #f4f8f5 em :root, depois aplique em .card com var().
- Cores com tokens
Seu CSS é aplicado a uma página de exemplo em uma prévia isolada. Os testes verificam os estilos calculados.
Dúvidas sobre esta lição
Travou em algum ponto? Pergunte. Descobriu algo? Compartilhe. Explicar também é uma ótima forma de aprender.
Carregando publicações…