Declaração e Uso de Propriedades Personalizadas
Defina propriedades personalizadas CSS com o prefixo -- e use-as com a função var().
Declaração e Uso de Propriedades Personalizadas é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
O que são propriedades personalizadas do CSS?
As propriedades personalizadas do CSS (também chamadas de variáveis CSS) permitem definir um valor reutilizável uma vez e usá-lo em toda a sua folha de estilos. Elas seguem a sintaxe --name: value.
Declaração de propriedades personalizadas
Declare propriedades personalizadas em qualquer elemento. Declará-las em :root faz com que fiquem disponíveis globalmente:
<div class="demo">Custom properties declared on :root</div>
Uso da função var()
Faça referência a uma propriedade personalizada com a função var():
<button>Styled Button</button>
As propriedades personalizadas são herdadas
As propriedades personalizadas seguem a herança normal do CSS. Uma propriedade definida em um elemento pai fica disponível para todos os seus descendentes, a menos que seja substituída.
<div class="card">
<div class="card__body">Inherits --card-bg from .card</div>
</div>
Valores inválidos de propriedades personalizadas
Ao contrário das propriedades CSS comuns, um valor inválido de propriedade personalizada não faz com que a declaração seja ignorada — a variável simplesmente é resolvida como está. A propriedade consumidora determina então se ela é válida.
Propriedades personalizadas versus variáveis do Sass
Principais diferenças:
- As propriedades personalizadas do CSS são dinâmicas no navegador — elas são atualizadas dinamicamente
- As variáveis do Sass são eliminadas durante a compilação
- As propriedades personalizadas podem ser alteradas com JavaScript
- As propriedades personalizadas respeitam a cascata e a herança
Convenções de nomenclatura
Dê nomes semânticos às propriedades personalizadas, não nomes baseados em seu valor visual. Isso facilita atualizá-las posteriormente:
<p class="demo">Named --color-primary, --color-text, --size-spacing-sm</p>
Escopo global versus escopo do componente
Defina valores globais em :root e valores específicos do componente na classe raiz do componente:
<div class="card">Global font-size-base + component-scoped card vars</div>
Propriedades personalizadas em calc()
As propriedades personalizadas funcionam dentro de calc() — elas devem incluir unidades quando usadas em cálculos de dimensões:
<div class="nav">Navbar (var(--nav-height))</div>
<div class="main-content">Main content fills the rest via calc()</div>
Propriedades personalizadas responsivas
Altere os valores das propriedades personalizadas dentro de consultas de mídia para criar sistemas responsivos de valores:
<div class="section">Padding grows to 6rem on wide screens</div>
Propriedades personalizadas para animações
Anime elementos alterando uma propriedade personalizada (geralmente por meio de JavaScript), em vez de várias propriedades individuais:
<div class="progress-track">
<div class="progress"></div>
</div>
Verificação rápida
Como declarar uma propriedade personalizada global do CSS chamada --accent?
Recapitulação
As propriedades personalizadas do CSS são declaradas com --name: value e usadas com var(--name). Declare valores globais em :root; limite os valores dos componentes aos seletores dos componentes. Elas são dinâmicas, respeitam a cascata e podem ser alteradas pelo JavaScript — o que as torna muito mais poderosas que as variáveis do Sass.
Perguntas Frequentes
A aula “Declaração e Uso de Propriedades Personalizadas” é grátis?
Sim — o texto completo de “Declaração e Uso de Propriedades Personalizadas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Declaração e Uso de Propriedades Personalizadas”?
Defina propriedades personalizadas CSS com o prefixo -- e use-as com a função var(). Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Declaração e Uso de Propriedades Personalizadas”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Declaração e Uso de Propriedades Personalizadas
- Valores de Fallback e var()
- Definindo o Escopo de Variáveis para Componentes
- Atualizando Variáveis com JavaScript