10.1 Declaração de Variáveis
Variáveis em CSS, também conhecidas como propriedades customizadas (CSS Custom Properties), permitem aos desenvolvedores salvar valores de propriedades em um só lugar e reutilizá-los no documento. Isso deixa o CSS mais flexível e manejável, especialmente ao trabalhar em projetos grandes.
Declaração de variáveis
Variáveis em CSS são declaradas usando dois traços (--) antes do nome da variável.
Geralmente, elas são declaradas dentro do seletor :root, para torná-las acessíveis em todo o documento.
Sintaxe:
:root {
--nome-variavel: valor;
--nome-variavel: valor;
}
Exemplo:
Neste exemplo, três variáveis são declaradas: --main-color, --secondary-color, e --font-size.
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
10.2 Uso de Variáveis
Para usar variáveis, usa-se a função var(), que aceita o nome da variável como argumento.
Sintaxe:
seletor {
propriedade: var(--nome-variavel);
propriedade: var(--nome-variavel);
}
Exemplo:
Este exemplo usa as variáveis declaradas anteriormente para estilizar o fundo, cor do texto e tamanho da fonte do elemento <body>.
body {
background-color: var(--main-color);
color: var(--secondary-color);
font-size: var(--font-size);
}
10.3 Herança e redefinição de variáveis
Variáveis CSS são herdadas pela hierarquia de elementos. Isso significa que, se uma variável é declarada em um elemento, ela estará disponível para os elementos filhos também. As variáveis também podem ser redefinidas dentro de outros seletores.
Exemplo:
Neste exemplo, o elemento .header redefine a variável --main-color, e essa nova variável
se aplica somente a ele. Ao mesmo tempo, o elemento .footer usa o valor da variável,
declarado em :root.
<div class="header">Header</div>
<div class="footer">Footer</div>
:root {
--main-color: #3498db;
}
.header {
--main-color: #e74c3c;
background-color: var(--main-color);
}
.footer {
background-color: var(--main-color);
}
10.4 Vantagens de usar variáveis CSS
1. Facilitação na gestão dos estilos:
As variáveis permitem mudar o valor de uma propriedade em um único local, e essa mudança será automaticamente aplicada a todos os lugares onde essa variável é usada. Isso é especialmente útil para tematização e manutenção de um estilo consistente.
2. Melhoria na legibilidade e manutenção do código:
O uso de variáveis torna o código CSS mais legível e compreensível, pois elas podem ser usadas para descrever
valores como cores e tamanhos, que podem ter um significado semântico
(por exemplo, --main-color ao invés de #3498db).
3. Atualização dinâmica de estilos:
Variáveis podem ser alteradas dinamicamente usando JavaScript, o que permite criar interfaces de usuário mais interativas e dinâmicas.
GO TO FULL VERSION