Variáveis CSS - Os SUPERPODERES das variáveis NATIVAS do CSS

Опубликовано: 12 Август 2026
на канале: Fê Fialho

2,447

267

Usa variáveis de pré-processadores? Nesse vídeo vou falar das poderosas Variáveis nativas do CSS (aka Custom Properties ❤️), que talvez sejam uma das coisas (infelizmente) mais subutilizadas no CSS.

Vou mostrar um exemplo de troca de tema (Dark Mode🌛 e Light Mode 🌞) usando variáveis do SCSS, a refatoração dessas variáveis para variáveis nativas do CSS e a manipulação desses valores usando JavaScript 😁

00:00 Introdução
00:32 Desenvolvimento do exemplo
01:12 Tema (Dark Mode e Light Mode) usando Variáveis SCSS
04:44 Refatoração para Variáveis CSS
08:46 Manipulação com JavaScript
10:21 Integração com pré-processadores e CSS-in-JS
11:15 Desvantagens? Uso com media queries
12:16 Suporte de navegadores

🔗 LINKS

🔹 Conteúdo em texto do vídeo: https://www.felipefialho.com/blog/os-...
🔹 Exemplo no Codepen: https://codepen.io/felipefialho/pen/E...
🔹 Venice (Design System): https://github.com/juntossomosmais/ve...

➡️ REFERÊNCIAS

MDN Using CSS custom properties (variables): https://developer.mozilla.org/en-US/d...
Can I Use CSS Variables (Custom Properties): https://caniuse.com/#feat=css-variables
Everything you need to know about CSS Variables: https://www.freecodecamp.org/news/eve...

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

☕️ GOSTOU DO CONTEÚDO? Aceito um café 😍

Pix: [email protected]
PicPay: https://app.picpay.com/user/felipe.fi...

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

➡️ SOBRE MIM

Blog: https://felipefialho.com/blog
Github: https://github.com/felipefialho
Twitter: / felipefialho_
LinkedIn: / felipefialho
Front-end BR: https://github.com/frontendbr