Variáveis e Funções (CSS Custom Properties). 🌴 TRILHA CSS 🎨 Etapa 12

Academy Code Christ 0

  Seja muito bem-vindo à Academy Code Christ! 


🌍 Academy Code Christ está disponível em vários idiomas.
Fique à vontade para usar o tradutor na Barra lateral (Sidebar) 
e aprender no seu idioma.

📚 Continue sua jornada de aprendizado



A Academy Code Christ oferece trilhas de aprendizado em diferentes tecnologias. Explore os cursos, acompanhe as aulas e avance em sua jornada de conhecimento.  


📋 Menus correspondentes:



💻 Pratique o que você aprende

Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.


🎨 Etapa 12 


O que você vai aprender nesta aula?

Nesta aula da Academy Code Christ, você vai aprender desde a declaração básica até a criação de temas dinâmicos (Dark Mode) e o uso de funções matemáticas avançadas como clamp() e calc().

Imagine que você tem um site com 50 páginas e decide mudar o tom de azul da sua marca. Sem variáveis, você teria que abrir cada arquivo e substituir o código hexadecimal manualmente.

As variáveis permitem que você armazene um valor (cor, tamanho, fonte) em um único lugar.

  • Eficiência: Altere em um lugar, atualize em todo o site.

  • Organização: Use nomes semânticos como --cor-principal em vez de códigos difíceis de lembrar.


🧠 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.


⚙️ 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

✅ Prefixe suas variáveis para organização (--clr-, --sz-, --sp- etc.);
 ✅ Agrupe-as em seções (:root, .tema-escuro, .tema-claro);
 ✅ Use clamp() para fontes e margens fluidas;
 ✅ Combine com calc() para layouts elásticos;
 ✅ Separe um arquivo só para variáveis — estilo “design system”.



📚 Continue aprendendo CSS:


🎨 Etapa 1 👉  Introdução ao CSS

🎨 Etapa 3 👉 Box Model, Display e Posicionamento

🎨 Etapa 5 👉  Bordas, Sombreamentos e Efeitos Visuais

🎨 Etapa 6 👉 Pseudo-Classes e Pseudo-Elementos

🎨 Etapa 7 👉 Flexbox: Layouts Flexíveis e Responsivos

🎨 Etapa 8 👉 CSS Grid: Layouts de Grade Avançados

🎨 Etapa 9 👉 Responsividade eMedia Queries

🎨 Etapa 10 👉 Transições eAnimações no CSS

🎨 Etapa 11 👉 Efeitos Visuais: Gradientes, Sombras e Estilo Translúcido

🎨 Etapa 12 👉 Você está nessa Etapa

🎨 Etapa 13 👉 Layout Responsivo Completo com Grid, Flexbox e Media Queries

🎨 Etapa 14 👉 Boas Práticas, e Estrutura Profissional de Projeto CSS

🎨 Etapa 15 👉 Performance, Otimização e Boas Práticas Avançadas de CSS





Este conteúdo faz parte do Academy Code Christ. 

Um projeto criado para ajudar jovens e iniciantes a aprender programação do zero, de forma simples e gratuita.

Nossa missão é compartilhar conhecimento e incentivar mais pessoas a descobrir que também podem aprender tecnologia, criar projetos e desenvolver novas habilidades.
Todo o conteúdo é disponibilizado gratuitamente, de forma clara, prática e 
sem enrolação. 

Você pode apoiar o projeto se quiser 
com um café. 



Tags

Post a Comment

Postar um comentário

Postagem Anterior Próxima Postagem