Variáveis CSS: O Jeito Certo

แชร์
ฝัง
  • เผยแพร่เมื่อ 5 พ.ย. 2024

ความคิดเห็น • 61

  • @allandeyvson7066
    @allandeyvson7066 ปีที่แล้ว +1

    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
      @dpwoficial  ปีที่แล้ว +1

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

  • @robsondssilva
    @robsondssilva 2 ปีที่แล้ว +4

    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
      @dpwoficial  2 ปีที่แล้ว +2

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

  • @RodrigoDechen
    @RodrigoDechen 2 ปีที่แล้ว +5

    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
      @dpwoficial  2 ปีที่แล้ว +1

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

  • @fabricadesites
    @fabricadesites 2 ปีที่แล้ว +3

    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
      @dpwoficial  2 ปีที่แล้ว

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

  • @vattghern2954
    @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
      @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
      @vattghern2954 ปีที่แล้ว +1

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

  • @glauciogv5225
    @glauciogv5225 ปีที่แล้ว +1

    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
      @dpwoficial  ปีที่แล้ว +1

      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
    @ebvaldoe.superaebvaldo5781 ปีที่แล้ว +2

    É isso que eu chamo de aula!

  • @vitormelo22
    @vitormelo22 ปีที่แล้ว +1

    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
      @dpwoficial  ปีที่แล้ว

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

  • @GiovanaGomes-o4x
    @GiovanaGomes-o4x 11 หลายเดือนก่อน

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

    • @dpwoficial
      @dpwoficial  11 หลายเดือนก่อน

      A gente tenta. :)

  • @ddreamer0001
    @ddreamer0001 7 หลายเดือนก่อน +1

    muito obrigado, vc ensina muito bem!

    • @dpwoficial
      @dpwoficial  7 หลายเดือนก่อน

      Eu que agradeço. :)

  • @mauriciolima1629
    @mauriciolima1629 2 ปีที่แล้ว +1

    Seria legal se pudesse um transition com css variables.

    • @dpwoficial
      @dpwoficial  2 ปีที่แล้ว

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

  • @william-esteves
    @william-esteves 2 ปีที่แล้ว

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

    • @dpwoficial
      @dpwoficial  2 ปีที่แล้ว

      Eu que agradeço e reagradeço.

  • @marcusnunes5970
    @marcusnunes5970 ปีที่แล้ว

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

    • @dpwoficial
      @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. :)

  • @thiagomoraes791
    @thiagomoraes791 2 ปีที่แล้ว

    o conteúdo é monstro, eu tenho q compartilhar

    • @dpwoficial
      @dpwoficial  2 ปีที่แล้ว

      Opa, fique à vontade! x)

  • @thiagomunich
    @thiagomunich 2 ปีที่แล้ว +1

    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
      @dpwoficial  2 ปีที่แล้ว +1

      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
      @thiagomunich 2 ปีที่แล้ว +1

      @@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
      @dpwoficial  2 ปีที่แล้ว +1

      @@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: th-cam.com/video/eTELLTacg-8/w-d-xo.html

  • @Kenny_93
    @Kenny_93 ปีที่แล้ว

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

    • @dpwoficial
      @dpwoficial  ปีที่แล้ว

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

    • @Kenny_93
      @Kenny_93 ปีที่แล้ว

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

    • @dpwoficial
      @dpwoficial  ปีที่แล้ว

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

  • @Alpaca6663
    @Alpaca6663 ปีที่แล้ว

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

  • @alexsanderrocha3894
    @alexsanderrocha3894 2 ปีที่แล้ว

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

    • @dpwoficial
      @dpwoficial  2 ปีที่แล้ว +1

      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
      @alexsanderrocha3894 2 ปีที่แล้ว +1

      @@dpwoficial obrigado! :))

  • @lutzcosta
    @lutzcosta 2 ปีที่แล้ว

    Qual é o tema que voce usa?

  • @marcossamuel9823
    @marcossamuel9823 ปีที่แล้ว

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

    • @dpwoficial
      @dpwoficial  ปีที่แล้ว

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

    • @marcossamuel9823
      @marcossamuel9823 ปีที่แล้ว

      @@dpwoficial Obrigado meu anjo.

  • @Jovem-Padawan
    @Jovem-Padawan 2 ปีที่แล้ว +1

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

    • @dpwoficial
      @dpwoficial  2 ปีที่แล้ว

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

    • @Jovem-Padawan
      @Jovem-Padawan 2 ปีที่แล้ว +1

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

    • @dpwoficial
      @dpwoficial  2 ปีที่แล้ว

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

  • @caiosantosvargas
    @caiosantosvargas 2 ปีที่แล้ว

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

    • @dpwoficial
      @dpwoficial  2 ปีที่แล้ว +1

      Não é possível fazer nativamente.

    • @caiosantosvargas
      @caiosantosvargas 2 ปีที่แล้ว

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

    • @dpwoficial
      @dpwoficial  2 ปีที่แล้ว +1

      @@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

  • @temisalves4969
    @temisalves4969 ปีที่แล้ว

    Excelente didática!

  • @felipecouto9044
    @felipecouto9044 2 ปีที่แล้ว

    Parabéns, excelente vídeo!

    • @dpwoficial
      @dpwoficial  2 ปีที่แล้ว

      Obrigado, Felipe! 😃

    • @plustecnologiaonline9252
      @plustecnologiaonline9252 2 ปีที่แล้ว

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

    • @dpwoficial
      @dpwoficial  2 ปีที่แล้ว +1

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