Variáveis CSS: O Jeito Certo

Variáveis CSS já têm um ótimo suporte e vieram mesmo para ficar. Mas você sabe usar variáveis CSS do jeito certo?
Variáveis CSS (ou CSS Custom Properties) já podem e estão sendo usadas há bastante tempo por desenvolvedores front-end.
Desde que surgiu, muitos devs já tiveram sem código CSS aprimorado e modernizado com o poder das variáveis CSS.
Entretanto, nem todos conhecem O JEITO CERTO de usar variáveis CSS. O jeito que realmente torna suas folhas de estilo muito mais eficientes, fáceis de ler e de atualizar.
Assista ao vídeo e saiba como usar as variáveis CSS do jeito certo!
⭐ Garanta sua vaga na próxima turma do curso de CSS
www.cssalemdos...
💬 Entre na comunidade exclusiva dpw para conversar sobre o conteúdo deste vídeo
/ discord
🌐 Variáveis CSS: um guia prático
desenvolviment...
==========
📷 Equipamentos usados para gravar este vídeo
- Sony Alpha a6400: amzn.to/3LZ9Zkv
- Cartão 128GB Extreme PRO SDXC: amzn.to/3rqVPRg
- Tripé Weifeng WT6734: amzn.to/3LYWUb4
==========
Assine o canal! bit.ly/dpw-youtube
- Facebook: / desenvolvweb
- Instagram: / desenvolvweb
- Twitter: / desenvolvweb
Conheça o blog desenvolvimento para web: desenvolviment...

[@allandeyvson7066]

Iniciei recentemente a minha jornada como Dev Front-end. Estou realizando um curso na Udemy e sempre que fico com dúvida de algo e venho no youtube, me deparo com seus vídeos, muito didático e explicativo demais, deixa bem claro as coisas, tá me ajudando demais mesmo, continuee!!!👊

[@dpwoficial]

Muito obrigado, Allan! Se quiser dar aquela força e divulgar o canal para seus colegas de curso, agradeço demais. vlwww 👊

[@robsondssilva]

Eu iniciei meus estudos em front-end através da alura no mês passado quando entrei de férias. Logo em seguida (não sei como) seu canal foi recomendado através do video do :has(). Seus vídeos são muito didáticos. Muito obrigado pelo compartilhamento e parabéns demais!

[@dpwoficial]

Eu que agradeço pelo comentário, Robson. Muito legal quando contam como chegaram no canal.

[@RodrigoDechen]

Em cada section dos sites crio uma serie de feriáveis para definir cores e tamanho das coisa. com isso eu consigo mudar esses sections de lugar e criar um novo layout base para ela, por exp. trocando ela de clara para escura, ou de amarela para azul. Assim vai as possibilidades são infinitas

[@dpwoficial]

Boa! Esse é um bom uso para variáveis CSS. :)

[@fabricadesites]

Seus vídeos são excelentes, curtos e cheios de conteúdo útil, não só do que é falado, mas da pra aprender muito com a escrita do teu código, parabéns e obrigado 🙋🏾‍♂️

[@dpwoficial]

Opa, eu que agradeço pelas palavras, Antônio. :)

[@ddreamer0001]

muito obrigado, vc ensina muito bem!

[@dpwoficial]

Eu que agradeço. :)

[@glauciogv5225]

Prezado, ótimo vídeo, mais um inscrito. Tenho uma aplicação que lê um termômetro e gera uma página html com o resultado, que é atualizado segundo a segundo. Busco entender um pouco de variáveis para ter uma forma de usar o valor lido para "alimentar" um script CSS. Abs

[@dpwoficial]

Opa, bem vindo, Glaucio. Provavelmente, você vai conseguir fazer com variáveis CSS sim. Inclusive, há métodos JavaScript próprios para pegar/especificar valores de variáveis CSS: developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#values_in_javascript

[@ebvaldoe.superaebvaldo5781]

É isso que eu chamo de aula!

[@dpwoficial]

😁

[@GiovanaGomes-o4x]

incrível! Explicação de forma simples e clara.

[@dpwoficial]

A gente tenta. :)

[@thiagomoraes791]

o conteúdo é monstro, eu tenho q compartilhar

[@dpwoficial]

Opa, fique à vontade! x)

[@vattghern2954]

ótimo vídeo, eu estava com essa ideia de alterar somente o valor da variável faz um tempo, você fixou ela na minha mente agora. Estou criando um mini framework que utiliza desse principio para faciliatar a customizacao do usuário. Eu basicamente tenho variáveis de escopo global que todo elemento recebe e reatribui em um escopo local, fazendo assim todo o estilo se modificar de uma forma mais fácil e concisa.

[@dpwoficial]

humm, acho que o que você tá fazendo é tipo open-props.style/. Se for, mesmo, dá uma olhada nele que pode ter coisas bem interessantes para inspiração.

[@vattghern2954]

@@dpwoficial exatamente kk, é basicamente uma mistura disso com o pico.css

[@william-esteves]

Vídeo para ver e rever... obrigado !

[@dpwoficial]

Eu que agradeço e reagradeço.

[@mauriciolima1629]

Seria legal se pudesse um transition com css variables.

[@dpwoficial]

É possível! Num outro vídeo eu mostro. ;)

[@vitormelo22]

Você sabe se eles tem a pretenção no futuro de mudar a sintaxe, da mesma forma como atualizaram a rgb e hsl? Acho a pior sintaxe de variável já feita: var(--nome-var), não entendo pq não se inspiraram em sass ou less para esse caso.

[@dpwoficial]

Eu também não sei como chegaram nessa sintaxe, mas acho difícil mudarem.

[@temisalves4969]

Excelente didática!

[@dpwoficial]

Vlw, meu caro!

[@thiagomunich]

Tem previsão de quando vai sair o curso avançado de CSS? Já tô na lista de espera. Sou desenvolvedor ReactJS e utilizo o Material-UI. Tenho interesse em melhorar no CSS com foco em responsividade e animações.

[@dpwoficial]

Fala, Thiago. Vai sair em breve. Mas já aviso que não é bem um curso "tradicional" de CSS, que ensina propriedades, valores, técnicas de layout etc. Ele é mais focado em boas práticas, convenções, arquiteturas etc.

[@thiagomunich]

@@dpwoficial Obrigado pela resposta. Você tem ou pretende disponibilizar algum curso mais voltado pra essas técnicas de layout e tal? Focado no CSS em si

[@dpwoficial]

@@thiagomunich Sobre layouts, temos 2 cursos grátis na Udemy: - Flexbox: www.udemy.com/course/flexbox-guia-completo/ - CSS Grid: www.udemy.com/course/css-grid-layout/ Sobre animações, temos um minicurso aqui mesmo no canal: kzbin.info/www/bejne/m4WofX-KlsiaY5o

[@Kenny_93]

Ótimo conteúdo amigo! Gostaria de saber quais extensões você usou para alterar o nome das cores, obrigado.

[@dpwoficial]

Obrigado, Davyd. :) Como assim alterar o nome das cores? Em qual minuto do vídeo aparece?

[@Kenny_93]

@@dpwoficial tá com um realce em néon, por exemplo em tomato

[@dpwoficial]

@@Kenny_93 Ahh, entendi. É esse tema do VS Code: marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode

[@marcusnunes5970]

No meu só esta funcionandoom o root, e definindo o valor da propriedade padding lá para cada botão.

[@dpwoficial]

Não entendi muito bem o que você disse, mas, seguindo o mostrado no vídeo, funciona direitinho. Tanto que funcionou no vídeo. :)

[@felipecouto9044]

Parabéns, excelente vídeo!

[@dpwoficial]

Obrigado, Felipe! 😃

[@plustecnologiaonline9252]

Por favor abre uma turma logo! Eu preciso do seu curso urgente!!!!! Seu conteúdo é top demais!

[@dpwoficial]

Opa, @@plustecnologiaonline9252, já já vamos abrir. Cadastra seu e-mail lá. ;)

[@Jovem-Padawan]

Qual a vantagem desse método em relação ao SCSS?

[@dpwoficial]

Não é possível fazer essa comparação. :has() é uma pseudo-classe CSS; Sass é um pré-processador CSS.

[@Jovem-Padawan]

@@dpwoficial Digo em relação a criação de variáveis

[@dpwoficial]

@@Jovem-Padawan Ah sim... Basicamente, é completamente diferente. rs Vou fazer um vídeo sobre isso. :)

[@caiosantosvargas]

Já e possível definir as variáveis na média query ou só com sass

[@dpwoficial]

Não é possível fazer nativamente.

[@caiosantosvargas]

@@dpwoficial que chato .... Pq daria pra definir isso sem usar o saas

[@dpwoficial]

@@caiosantosvargas Já, já, teremos nativamente a nova sintaxe de range. Dá uma olhadinha no BFB para você já ver em funcionamento: github.com/desenvolvweb/basic-front-boilerplate/blob/master/style/01-settings/_breakpoint.scss#L16-L17

[@Alpaca6663]

Qual o nome do tema que vc usa que as cores fica RGB?

[@dpwoficial]

SynthWave '84

[@alexsanderrocha3894]

Tá, mas minha dúvida é: Qual a extensão ou temas para deixar a fonte com esse destaque em neon?

[@dpwoficial]

haha Essa pergunta tá aparecendo mais que sobre o conteúdo do vídeo. =P É o tema SynthWave '84: marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode

[@alexsanderrocha3894]

@@dpwoficial obrigado! :))

[@marcossamuel9823]

Olá sei que e uma pergunta meio besta mas poderia me falar como deixo seu css assim? brilhante ?

[@dpwoficial]

É um tema do VS Code, dá uma olhada: marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode

[@marcossamuel9823]

@@dpwoficial Obrigado meu anjo.

[@lutzcosta]

Qual é o tema que voce usa?

[@dpwoficial]

SynthWave '84