1.1 O que são variáveis CSS?
As variáveis CSS, também conhecidas como propriedades customizadas (custom properties), são variáveis declaradas no CSS que podem ser utilizadas para armazenar valores como cores, tamanhos, fontes e outros atributos CSS. Elas oferecem oportunidades eficazes para melhorar a flexibilidade e a manutenção dos estilos nas páginas web.
O que são variáveis CSS?
Variáveis CSS são variáveis que podem armazenar valores de propriedades CSS e ser reutilizadas em várias partes dos estilos. Elas são definidas usando dois hífens (--), e podem ser definidas em qualquer seletor, mas geralmente são definidas no seletor raiz :root, tornando-as acessíveis em todo o documento.
Exemplo:
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
Características principais das variáveis CSS:
- Reutilização: As variáveis CSS permitem definir um valor uma vez e utilizá-lo várias vezes em diferentes partes do código CSS. Isso ajuda a evitar a duplicação e simplifica a gestão dos estilos.
- Flexibilidade: os valores das variáveis CSS podem mudar dependendo das condições, como o estado do elemento ou media queries. Isso permite criar estilos mais adaptáveis e dinâmicos.
- Herança: As variáveis CSS são herdadas de elementos pais para filhos, o que simplifica a gestão e organização dos estilos.
- Gestibilidade: o uso de variáveis facilita a manutenção do código, pois alterações nos valores das variáveis são refletidas automaticamente em todos os elementos que as utilizam.
1.2 Exemplos de uso de variáveis CSS
Exemplo de uso de variáveis CSS no JavaScript:
document.documentElement.style.setProperty('--main-color', '#e74c3c');
Exemplo 1: Definição e uso de variáveis
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
a {
color: var(--primary-color);
}
a:hover {
color: darken(var(--primary-color), 10%);
}
<body>
<p>This is a paragraph.</p>
<a href="#">This is a link</a>
</body>
Explicação:
- Neste exemplo, três variáveis são definidas:
--main-bg-color,--main-text-colore--primary-color - Essas variáveis são usadas para definir a cor do fundo, do texto e dos links
1.3 Mudança de valores de variáveis em JavaScript
Neste exemplo, as variáveis são usadas para definir o tema de design da página. Ao clicar no botão, os valores das variáveis são alterados, resultando em uma mudança de fundo e cor do texto:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
<button id="toggle-theme">Toggle Theme</button>
<p>This is a paragraph.</p>
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--main-bg-color') === '#f0f0f0') {
root.style.setProperty('--main-bg-color', '#333');
root.style.setProperty('--main-text-color', '#f0f0f0');
} else {
root.style.setProperty('--main-bg-color', '#f0f0f0');
root.style.setProperty('--main-text-color', '#333');
}
});
GO TO FULL VERSION