O Que São Variáveis no CSS
Bem-vindo(a) ao post no blog.
🧠 O Que São Variáveis no CSS
Variáveis permitem armazenar valores (como cores, tamanhos, espaçamentos) para reutilizar em todo o projeto.
💬 Sem variáveis, você repetiria o mesmo valor diversas vezes.Com variáveis, você altera em um só lugar e tudo se atualiza.
🧩 Como Declarar e Usar Variáveis
As variáveis no CSS seguem esta sintaxe:
:root {
--nome-da-variavel: valor;
}
elemento {
propriedade: var(--nome-da-variavel);
}
● :root é o elemento raiz da página (equivalente a <html>).
● As variáveis declaradas nele ficam disponíveis globalmente.
🔹 Exemplo básico
:root {
--cor-primaria: #0077ff;
--cor-secundaria: #00c6ff;
--fonte-principal: 'Poppins', sans-serif;
--raio-borda: 10px;
}
button {
background: var(--cor-primaria);
color: white;
border-radius: var(--raio-borda);
font-family: var(--fonte-principal);
}
✅ Simples, elegante e centralizado.
Se mudar --cor-primaria: #ff0055, todo o site muda de cor automaticamente!
💡 Herança de Variáveis
As variáveis também herdam o escopo.
Você pode sobrescrever uma variável localmente em outro seletor:
:root {
--cor-texto: black;
}
.dark-mode {
--cor-texto: white;
}
p {
color: var(--cor-texto);
}
👉 Quando o elemento estiver dentro de .dark-mode, ele herda o novo valor.
Isso permite algo genial: mudar temas inteiros sem duplicar código!
🌗 Criando Temas Claro e Escuro
📄 HTML
<body class="light">
<button id="toggle">Alternar Tema</button>
<h1>Bem-vindo!</h1>
<p>Aprenda CSS com estilo e eficiência.</p>
</body>
📄 CSS
:root {
--bg-color: #ffffff;
--text-color: #222222;
--accent-color: #0077ff;
}
body {
background: var(--bg-color);
color: var(--text-color);
font-family: 'Poppins', sans-serif;
transition: background 0.3s, color 0.3s;
}
button {
background: var(--accent-color);
border: none;
color: white;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
}
/* Tema Escuro */
body.dark {
--bg-color: #1a1a1a;
--text-color: #f5f5f5;
--accent-color: #00c6ff;
}
📄 JavaScript (para alternar tema)
document.getElementById('toggle').onclick = () => {
document.body.classList.toggle('dark');
};
💎 Resultado:
Clique no botão e o site alterna entre tema claro e escuro instantaneamente — usando apenas variáveis CSS e uma pequena linha de lógica.
📐 Funções Úteis do CSS
As funções permitem manipular valores dinamicamente.
Vamos ver as mais utilizadas e poderosas.
🔹 calc() — Fazendo Cálculos no CSS
Serve para somar, subtrair, multiplicar ou dividir valores de diferentes unidades.
.container {
width: calc(100% - 40px);
height: calc(100vh - 100px);
}
💬 Ideal para ajustar espaçamentos e criar layouts elásticos.
⚠️ Atenção: espaço entre operadores é obrigatório (calc(100%-10px) não funciona).
🔹 min() e max()
Com essas funções, o CSS escolhe automaticamente o menor ou maior valor entre os parâmetros.
h1 {
font-size: min(8vw, 36px);
}
💡 O título cresce com a tela até o limite de 36px.
🔹 clamp() — Controle Total
Combina o mínimo, o ideal e o máximo valor em uma única linha:
h2 {
font-size: clamp(1.2rem, 3vw, 2.4rem);
}
💬 Fonte adaptável a qualquer tela: nunca muito pequena nem grande demais.
📘 Para um melhor Aprendizado 🎯 Pratique com exercícios, desafios e projetos
⚙️ Exemplo Prático — Design Dinâmico com Variáveis e Funções
📄 HTML
<div class="container">
<h1>Curso CSS Master</h1>
<p>Flexível, moderno e inteligente com variáveis e funções CSS.</p>
<button>Clique Aqui</button>
</div>
📄 CSS
:root {
--cor-base: #0077ff;
--cor-bg: #f0f5fa;
--cor-texto: #222;
--padding: 20px;
--radius: 12px;
--font-titulo: clamp(1.5rem, 4vw, 2.5rem);
}
body {
font-family: 'Poppins', sans-serif;
background: var(--cor-bg);
color: var(--cor-texto);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background: white;
padding: var(--padding);
border-radius: var(--radius);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
text-align: center;
width: clamp(280px, 50%, 600px);
}
h1 {
font-size: var(--font-titulo);
color: var(--cor-base);
}
button {
background: var(--cor-base);
color: white;
border: none;
border-radius: var(--radius);
padding: calc(var(--padding) / 2);
font-weight: 600;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: color-mix(in srgb, var(--cor-base), white 20%);
}
💥 Resultado:
Um layout escalável e fluido, com tamanhos e cores definidos dinamicamente.
Basta mudar uma variável e o design inteiro se adapta!🧩 CSS Custom Properties + JavaScript (Extra)
Você pode alterar variáveis via JS — em tempo real:
document.documentElement.style.setProperty('--cor-base', '#ff4f81');
💡 Isso permite customização ao vivo, como trocas de tema e sliders de cor — recurso muito usado em painéis de controle e editores online.
⚡ Dicas Profissionais
Comentários
Postar um comentário