2.1 Declaração de variáveis CSS
Variáveis CSS, também conhecidas como propriedades customizadas (Custom Properties), permitem definir valores que podem ser reutilizados em várias partes do código CSS. Elas simplificam bastante o gerenciamento dos estilos e aumentam sua flexibilidade.
Variáveis CSS são declaradas com um duplo hífen (--) e podem ser definidas em qualquer seletor. No entanto, para garantir a acessibilidade das variáveis em todo o documento, elas costumam ser definidas no seletor raiz :root.
Sintaxe:
seletor {
--nome-da-variável: valor;
}
Exemplo:
Neste exemplo, quatro variáveis são declaradas: --main-bg-color, --main-text-color, --primary-color, e --font-size.
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
Uso das variáveis CSS
Para utilizar o valor de uma variável, aplica-se a função var(), que recebe o nome da variável como argumento.
Sintaxe:
seletor {
propriedade: var(--nome-da-variável);
}
Exemplo:
Neste exemplo, os valores das variáveis são usados para definir a cor de fundo, a cor do texto, o tamanho da fonte e a cor dos links.
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
2.2 Exemplos de uso de variáveis CSS
Exemplo 1: Uso básico de variáveis
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
<body>
<p>Este é um parágrafo com um link para <a href="#">Example.com</a>.</p>
</body>
Resultado:
- O fundo da página será cinza claro
- O texto será cinza escuro
- O tamanho da fonte será de 16 pixels
- Os links terão cor azul
Exemplo 2: Sobrescrever variáveis em componentes individuais
Variáveis CSS podem ser sobrescritas para elementos ou componentes individuais, proporcionando flexibilidade na estilização:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
.header {
background-color: var(--primary-color);
color: var(--main-bg-color);
}
.footer {
--primary-color: #e74c3c; /* Sobrescrevendo variável */
background-color: var(--primary-color);
color: var(--main-bg-color);
}
<div class="header">
<p>Este é o cabeçalho.</p>
</div>
<div class="footer">
<p>Este é o rodapé.</p>
</div>
Resultado:
- O fundo do cabeçalho será azul, e o texto cinza claro
- O fundo do rodapé será vermelho (variável sobrescrita), e o texto cinza claro
Exemplo 3: Uso de variáveis em combinação com outros valores
Variáveis CSS podem ser combinadas com outros valores e funções CSS:
:root {
--padding: 10px;
--margin: 20px;
}
.container {
padding: var(--padding);
margin: var(--margin) auto;
border: 1px solid black;
}
<div class="container">
<p>Este é um container com padding e margin.</p>
</div>
Resultado:
- O container terá padding e margin definidos pelas variáveis
2.3 Uso de variáveis CSS em JavaScript
Exemplo de uso de variáveis CSS em JavaScript
Variáveis CSS podem ser dinamicamente alteradas via JavaScript, permitindo adaptar os estilos em tempo real:
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
<button id="toggle-theme">Toggle Theme</button>
<p>Este é um parágrafo.</p>
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--bg-color') === '#ffffff') {
root.style.setProperty('--bg-color', '#333333');
root.style.setProperty('--text-color', '#ffffff');
} else {
root.style.setProperty('--bg-color', '#ffffff');
root.style.setProperty('--text-color', '#000000');
}
});
Explicação:
Ao clicar no botão, os valores das variáveis --bg-color e --text-color são alterados, o que resulta na mudança da cor de fundo e do texto na página.
GO TO FULL VERSION