Aprenda Sass em 25 Minutos | Curso Rápido de Sass

Подписаться 55 тыс.

Просмотров 17 тыс.

50% 1

Nessa aula rápida vamos aprender praticamente tudo que precisamos para saber o Sass (Syntactically Awesome Style Sheets), uma espécie de linguagem de programação de estilo. Ele também é conhecido como "Super CSS" ou CSS com anabolizantes.
⏱ Neste vídeo
00:00 - O que é SASS?
01:15 - Instalando Live Sass Compiler
02:45 - Criando um arquivo .scss
03:12 - Como funciona Live Sass Compiler
04:45 - Sempre referencie no HTML o CSS normal
05:30 - Variáveis
08:25 - Nesting (agrupamento)
12:00 - Import
15:05 - Mixin / include
21:21 - Extend
23:00 - Resumo de tudo
Quer aprender programação?
👉 curso.programacaoweb.com.br
#sass #css #programacaoweb

Наука

Опубликовано:

7 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 80

@Altherfx 10 месяцев назад

Você ensina de uma forma tão clara, assisti todos os seus cursos, assim que tiver condições vou comprar seu curso. Você merece o mundo! Parabéns.

@zarina3680 Год назад

Prof do céu, vc não tem noção de como me ajudou, tava quase jogando o meu pc do prédio kkkkkkk obgd de verdade

@vagnersilva399 Год назад

De fato,depois que aprender o CSS comum e entender o funcionamento,o SASS é uma ótima opção. Ótima aula, já havia visto SASS mas não havia entendido tão claramente como agora.Muito Obrigado

@guizz5401 20 дней назад

Estou fazendo curso e nunca aprendi e entendi de forma tão clara como as coisas funcionam, mas foi so ver seu video que deu pra entender qual a finalidade do sass. Parabens pelo video, ficou muito bom.

@janesilva6674 9 месяцев назад

Meu professor de programação preferido 🎉

@programacaoweb 9 месяцев назад

Muito obrigado Jane! Abraço!

@arthurkelvim5689 Год назад

Esse video devia ser patrimonio cultural de tao bom e facil que é. Fez 25 minutos parecer 5. Parabéns.

@programacaoweb Год назад

Muito obrigado Arthur! Abraço!

@MarcioSilva-bt7rm Год назад

N tava achando nada demais, as variáveis dá pra fazer com Css puro, como vc falou. Mas essa parada de importar e criar arquivos específicos para cada parte do documento me ganhou. Só vou usar sass agora kkkkkk

@danmarzo5508 20 дней назад

Top, ouvir sobre o scss e achei legal procurar sobre, essa tirou um bacodo de dúvidas

@joseliojjn 5 месяцев назад

Merece a contribuição pelos cursos gratuitos e que todos assinem os outros cursos.. valeu professor.

@programacaoweb 2 месяца назад

Muito obrigado Joselio! Grande abraço!

@glaysonvisgueira1102 4 месяца назад

Show! Vários conceitos e features do SASS explicados de forma direta, clara e rápida... sem arrudeio. Parabéns pelo trabalho e obrigado pelo conteúdo!

@programacaoweb 4 месяца назад

Muito obrigado Glayson! Abraço!

@allyson5918 2 месяца назад

Espetacular, muito obrigado por disponibilizar esse conteúdo.

@sauleragem 6 месяцев назад

Absurdo essa dinamica parabéns pelo canal estou maratonando..sucesso sempre.

@JailsonDev 8 месяцев назад

pra quem já sabe um pouco e tem noções de html css e sass básico, sempre é bom aprender mais um pouco... gostei, em 25 minutos aprendi bastante.

@PauloBastospaulo_bastos 5 месяцев назад

Mano... Ressalto as palavras de todos que comentaram positivamente as tuas aulas. Parabéns pelo trabalho!

@programacaoweb 5 месяцев назад

Obrigado Paulo. Abraço!

@militarbope 8 месяцев назад

Amazing explanation! Thanks for sharing!

@cristians2663 3 месяца назад

Parabéns pelo trabalho, aula sensacional!!

@programacaoweb 3 месяца назад

Valeu Cristian! Abraço!

@Playnaprogramacao 9 месяцев назад

Parabéns, excelente conteúdo

@devDiord 5 месяцев назад

monstro! muito obrigado mais uma vez

@m_sousa Месяц назад

Muito clara e objetiva a explicação, muito obrigada!

@programacaoweb Месяц назад

Que bom que gostou. Abraço!

@thaisl.7044 2 месяца назад

Que explicação sensacional, clara e objetiva! me ajudou muito! Obrigada.

@programacaoweb 2 месяца назад

Muito obrigado Thais! Eu que te agradeço por deixar seu comentário. Grande abraço!

@jandersonlira4906 Год назад

Top professor. parabéns pela aula.

@programacaoweb Год назад

Valeu Janderson! Abraço!

@viniciusm.m.7822 Год назад

Excelente aula, prof. Dimitri! Sass é o bicho! Thanks!

@programacaoweb Год назад

Valeu Vinicius! Abraço!

@viniciusm.m.7822 Год назад

@@programacaoweb aprendi tanta coisa em tão pouco tempo! Estou fazendo um projeto de portfolio guiado, ele é no css puro, então decidi aplicar o Scss para melhorar e agora com essa aula... já corrigi vários erros além de otimizar outras coisas haha Planejo fazer um vídeo sobre esse projeto quando terminar (tô na busca por job!), daí colocarei este vídeo também!

@user-fp8up7jr3u 3 месяца назад

Thanks Dude! You are the best!

@diogosouza7806 Год назад

top,didatico e rapido

@programacaoweb Год назад

*Curso Completo* 👉curso.programacaoweb.com.br/black/ Abraço!

@DaniloIbia 4 месяца назад

usei no meu portifolio adorei

@victorialopes455 11 месяцев назад

professor incrível como sempre

@teotoniaeduardo4180 10 месяцев назад

Pode me ajudar tbm quero ser apoiante

@victorialopes455 10 месяцев назад

@@teotoniaeduardo4180 é só fazer a compra pelo youtube, tem um botão escrito "seja apoiador"

@professorluisclaudio 2 месяца назад

Ótimo!

@albertMig 9 месяцев назад

Boa aula amigo

@programacaoweb 9 месяцев назад

Muito obrigado! Abraço

@LucasSouza-mf4mb 6 месяцев назад

pensei que era um bicho de sete cabeças, mas vc me mostrou ao contrário, muito obrigado pela aula.

@hawks2271 Год назад

Bom trabalho

@programacaoweb Год назад

Muito obrigado! Grande abraço!

@felipeteodoro403 Год назад

Show de bola seu video

@programacaoweb Год назад

Obrigado Felipe! Grande abraço

@johnnyvincent8545 2 месяца назад

Cara, eu adorei esse vídeo, isso me ajudou mto. Eu agradeço. Mas como eu faço pra aplicar um gradiente?

@programacaoweb 2 месяца назад

Oi Erick. O feito gradiente é CSS comum. Veja um exemplo 👉 chat.openai.com/share/6fc53fb9-2a43-4330-a288-f23d866444d1 .Abraço!

@EwertonMatosFerreira Год назад

para quem ta começando é melhor digitar cada cod para fixar os cods

@geiltonsoares4755 Год назад

Olá Dimitri. Conclui o html e o css com vc e vou iniciar o JS. Mas vi que são muitas informações e queria uma direção sua, de como pra tirar tudo isso de forma que me prepare pro mercado. Logo após o JS, q entender bastante, irei para PHP. Um abraço

@geiltonsoares4755 Год назад

Gostei da sua didática e não queria buscar conteúdos com outroa professores. Mas as informações que tenho na abeca são como peças soltas.

@programacaoweb Год назад

@@geiltonsoares4755 você precisa praticar. A melhor forma no meu ver é pegando serviços pra fazer. Oferece para amigos e conhecidos criar um site pra eles. Outra opção é começar um projeto no qual você tenha vontade de fazer. Ainda outra opção é pegar um site base e tentar criar ele sozinho, fazer um clone. Só praticando você aprende a colocar os fundamentos em ação. Incentivo pegar um trabalho, por que nada melhor do que praticar ganhando dinheiro. Melhor incentivo. Abraço!

@geiltonsoares4755 Год назад

@@programacaoweb obrigado professor, vou fazer isso.

@douglascassim 4 месяца назад

Obrigado pela Aula Dimitri. Poderia dizer qual é a extensão que vc utilizada para aparecer as cores da maneira que aparece em seu css.. por ex.: Blue.. o texto "blue" fica com o fundo azul.

@programacaoweb 4 месяца назад

Olá. A extensão se chama Color Highlight ⤵ Nome: Color Highlight ID: naumovs.color-highlight Descrição: Highlight web colors in your editor Versão: 2.5.0 Editor: Sergii N Link do Marketplace do VS: marketplace.visualstudio.com/items?itemName=naumovs.color-highlight Abraço!

@douglascassim 4 месяца назад

@@programacaoweb Obrigado pela atenção.

@filipirafaeldearaujocruz370 8 месяцев назад

professor, qual o tema do VS que o senhor usa no vídeo?

@programacaoweb 8 месяцев назад

Oi Filipi. Eu uso um tema chamado Drácula. Veja esse vídeo que tem todas as minhas configurações do VS Code 👉 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-c45nPVwMVzQ.html . Abraço!

@Gustavo-lk6jp 2 месяца назад

Professor, quando do um Ctrl + S para salvar fica abrindo uma tela do Sass, sera que consigo remove-la

@programacaoweb Месяц назад

Oi Gustavo. Não sei te dizer. Fazendo o processo corretamente isso não deveria acontecer. Tem alguma coisa errada. Abraço!

@Mateussantos-zl4xz Год назад

Professor eu vi que sobre @import o próprio sass indica não usá-lo mais e é indicado o @use ou @forward você pode fazer um tutorial sobre eles?

@programacaoweb Год назад

Olá. Sim, por enquanto ainda da para usar @import tranquilo, mas posso trazer sim a diferença pro @use e o @forward num outro vídeo. Obrigado a sugestão. Abraço!

@aledepaulaa Год назад

@@programacaoweb Trás pra gente professor, só pra esclarecer mesmo!! Mas bom saber que o @import ainda pode ser usado. Esse vídeo me ajudou bastante, muito obrigado !!

@MateusHenrique-ch1tw Год назад

Opa, já vi uma galera falando q o Sass é um tanto quanto esquecida Tu achas q essa é uma parte q eu deveria focar em estidar ou nem precise muito? O css tradicional já é o suficiente?

@programacaoweb Год назад

Oi Mateus. Eu particularmente não gosto de trabalhar com Sass. Prefiro usar CSS tradicional, por questão de costume mesmo. Mas algumas empresas só trabalham com Sass e alguns projetos maiores requerem uma organização melhor que o Sass oferece. Então na minha opinião saber o básico é legal. Mas não é necessário se concentrar demais nela. Abraço!

@eduardopereira8919 Год назад

Ola Dimitri, comprei o seu curso hoje, mas parece que está fora do ar, aconteceu algum problema?

@programacaoweb Год назад

Oi Eduardo. A Hotmart que é a plataforma onde o curso está hospedado as vezes passa por alguma instabilidade momentânea. Aqui está funcionando normal. Experimenta fechar o navegador e tentar logar novamente. Abraço!

@lucasdamasceno7068 Год назад

tailwind css funciona normal com sass e scss ou somente com css ?

@programacaoweb Год назад

Oi Lucas. Tailwind CSS é um framework de CSS que funciona com qualquer pré-processador CSS, incluindo Sass e SCSS. Isso significa que você pode usar as funcionalidades do Tailwind juntamente com as vantagens dos pré-processadores de CSS. Para usar Tailwind CSS com Sass ou SCSS, você precisará configurar seu projeto para que o pré-processador seja compilado em CSS. Depois disso, você poderá importar o arquivo CSS compilado em seu projeto. Por exemplo, para usar Tailwind CSS com Sass, você pode instalar o pacote "node-sass" e configurar seu projeto para compilar seu arquivo Sass em CSS. Em seguida, você pode importar o arquivo CSS compilado em seu HTML ou em seu arquivo Sass. De maneira geral, é importante lembrar que o Tailwind CSS é um framework de classes de CSS, então, independentemente do pré-processador que você está usando, você precisará escrever essas classes em seus arquivos de estilo. Abraço!

@ubersolitario Год назад

Professo o sCss deixa o site mais lento?

@programacaoweb Год назад

Oie. O Sass é transformado em CSS antes de publicar o site. Então não fica mais pesado, é normal, igual qualquer site com CSS. O Sass serve para ganhar produtividade durante o desenvolvimento apenas. Abraço!

@manuelfelixpaulo3409 Год назад

Como ser membro do canal?

@programacaoweb Год назад

Oi Manuel. Você pode clicar no botão "Seja Membro" ou clicar nesse link 👉www.youtube.com/@programacaoweb/join .Ainda outra opção é fazer curso completo 👉curso.programacaoweb.com.br .Abraço!