Dê super poderes ao CSS com SASS | Masterclass #15

Fala Dev, Mayk Brito na área! 💜
A Masterclass de hoje está INCRÍVEL e vai colocar seu CSS num outro nível.
Já imaginou poder usar lógica de programação, funções e estratégias para programar CSS? Então, para isso que o SASS nasceu. Para dar superpoderes ao CSS.
Se você quer ganhar tempo escrevendo CSS, poder organizar melhor seus códigos, fazer reuso de propriedades, e até funcionalidade avançadas, você precisa aprender a usar essa ferramenta, e é por isso que estou aqui 🥰
Bora aplicar alguns desafios e aprender SASS?
💜🚀
► Guia
❖ www.notion.so/...
-----
Acompanhe a Rocketseat nas redes sociais:
Site: www.rocketseat...
Twitter: / rocketseat
Facebook: / rocketseat
Instagram: / rocketseat_oficial
Comunidade: comunidade.rock...
Blog: rocketseat.com...
Inscreva-se na nossa Newsletter!
rocketseat.ck....
Ouça também:
Spotify: spoti.fi/2PwXeUp
Anchor.fm: anchor.fm/faladev
Apple Podcasts: apple.co/2pReOrN
Google Podcast: bit.ly/2Cgj077

[@KidioFs11x]

Pqp, hoje eu abri o site do sass pensando "ta na hora de estudar isso". Nossa, fiquei até assustado. Valeu rocketseat :)

[@rocketseat]

Temos certos poderes... 🔮👀 😂😂💜

[@JonatanEdOrtiz]

Exatamente o que aconteceu comigo! kkk Estava estudando sass hoje e pensei "Vou usar". Procurei por data o vídeo mais recente sobre o assunto e este tutorial é de hoje mesmo kkk Ainda mais da Rocketseat. Que maravilha!

[@daywisonsilva4048]

Só uma dica, a documentação recomenda que usemos o @use ao invés do @Import.

[@Saudavelpro]

o Maykão tá alí naquele nível didático do Guanabara, do Leonardo Leitão, e do João Ribeiro (Portugal) sem desmerecer os demais óbvio, mas tem uma excelente didática, tanto que mesmo já sabendo alguns conteúdos sempre assisto, parabéns.

[@maykbrito]

Eita Raphael! Que honra. Admiro demais esses mestres que você citou. Obrigado por tamanho carinho💜

[@rocketseat]

Ele é fera né?💜💜💜

[@Saudavelpro]

@@rocketseat com certeza

[@altamirsantos6030]

É nada, tava estudando por conta, e me vem isso ??? Sensacional :')

[@rocketseat]

Vaaaleu, Altamir! 💜💜

[@RonanTI]

x=2+"2"; if(x="22") { x = 5; } 2+2=5 Muito interessante o sass,com grandes poderes grande responsabilidades!

[@iuritorres]

Então mano... Já que é uma tecnologia mais "atualizada" do CSS, evita problema de navegador, como vc falou que ele compila pra um CSS pra funcionar em vários diferentes, etc etc... Eu posso aderir ele como tecnologia de estilização principal? Sou novo em programação, vejo tudo CSS e acabo ficando com pé atrás pra migrar pra uma que é melhor... Acha que vale a pena migrar?

[@xyluis]

Faz um tutorial desse "navegadorzinho" ai, namoral... Valeu!

[@maykbrito]

hehehehehe 🥰

[@rocketseat]

💜

[@JohannyLS]

github.com/maykbrito/simple-webview

[@valmendes4856]

@@maykbrito ¹

[@ph_martell]

@@JohannyLS não da certo, apresenta erro

[@DavidHad]

Por favor, Styled Components deixou tudo isso ultrapassado. Não há necessidade de configurar node-sass, Webpack ou todo esse inferno como era antigamente.

[@rocketseat]

Faala, David! 💜 O Styled Components é mais utilizado com ReactJS, React Native, etc... O SASS é mais para o JS puro, então pra quem está começando, é uma ótima opção para aprender, e esse é justamente o público alvo desse vídeo 💜

[@DavidHad]

Rocketseat mas isso dá tanto trabalho pra quem inicia que é melhor começar com React e SC!

[@kleberpereira8503]

[Como resolvo] ? Error: -13 /kleber EACCES: permission denied, mkdir '/kleber' Meu sistema é o Linux Mint

[@diegoi7]

9:52 Nas versões mais nova no VSCode quando você instala a extensão no canto inferior tem um botão para rodar o live server do compilador.

[@lazbonpim23]

O compile do SASS não aparece no meu setting.json

[@brunabergami3288]

Com "@import '@base' não consegui, mas consigo com "@use 'base'. Só uma diga, o video pode estar dezatualizado ou algo assim. Sempre bom procurar outras imformações.

[@webradioasasdaliberdadejoi1386]

Buenas! Não estou conseguindo visualizar na minha live server as alterações com o SASS, não aparece nenhuma definição que eu faço. Estou usando o VS Code.

[@tiagocabral5401]

Todas as vezes que eu habilito o Copilador do SASS, esse Output fica aparecendo o tempo todo automaticamente. Como desabilita isso?

[@matheusaraujo8617]

realmente a rocktseat lé mentes, kkk

[@rocketseat]

Temos alguns poderes especiais 👀🔮

[@蕭條傷心]

*e hoje eu programo, e hoje deixo o site bonito, e hoje deixo o melhorsissississícimo site do mundo e sass, e sass, e sass...*

[@devGuinho]

Meu settings.json não está trazendo (8:17 min) não está trazendo estas informações. Alguém pode ajudar ?

[@maykbrito]

Quando instalei o plugin no VSCode, veio sozinho. Se copiar o meu, será que dá certo?

[@rocketseat]

💜

[@devGuinho]

@@maykbrito funcionou ! Valeu Maikão

[@andersonsouza6885]

Uma dica a qualidade do video esta péssima, por favor mude !!! Video muito bom

[@matheusdecampos430]

O maluco é brabo gente /o/ Desenvolvi um projeto recentemente que se tivesse utilizado SASS, com certeza o esforço e repetição teria sido bem menor. Enfim, um passo de cada vez. Valeu Maykola!

[@maykbrito]

Tmj Math!

[@digitalhdr7768]

no meu não apareceu esse -webkit- 23:50 se alguém souber porque me fale.

[@potamo1288]

mano, logo agora q eu tô estudando isso vcs são tops d+ vlw.mas tem uma coisa, a documentação do sass ta dizendo pra trocar o @import por @use ou @forward

[@rocketseat]

Valeeu pela dica e pelo feedback, Luis! 💜

[@LeonardoLuzx]

Quero nem saber mais de SASS depois do Tailwind.

[@mrlagmaster3524]

Quando eu digito @import ' base ';da um erro no visual studio code e o sass para de funcionar

[@ProgramadorAleatorio]

SASS pensava que era coisa de youtube pop

[@Fernando-du5uj]

Caraca velho, me apaixonei por SASS. Muito obrigado pela aula e por essa excelente didática, Mayk. Abraço, querido.

[@The96tiago]

o tailwind foi feito com sass, certeza

[@valdeir125]

Parabéns Pelo conteúdo Rocketseat que conteúdo incrível!!!!

[@rocketseat]

Valeeeu demais, Valdeir! 💜 😍

[@gustavoranci2265]

Como você abriu aquela janela de cópias anteriores, no minuto 57:29? Gostei demais!

[@LeandroSilva-mw5yl]

também queria saber... descobriu amigo?

[@leh2289]

Eu gostaria de fazer esse navegadorzinho... alguém pode me dizer onde encontro info para poder fazer?

[@maykbrito]

No site do Electron, procura a documentação do Webview. Eu deixei o repositório público lá no github github.com/maykbrito/simple-webview

[@rocketseat]

💜

[@josuebarros-desenvolvedorw2490]

Estou finalmente aceitando que devo criar sites com SASS! A forma de deixar bem organizado, sem repetir codigo e facilitar manutenção... Depois de mexer em folhas de CSS de 4500 linhas, usar SASS vai ser uma deliciaaaaaa

[@johnnyferreira6121]

Cara, sass ou styled components? Estou iniciando um novo projeto e estou com essa dúvida

[@MrMatheus195]

Up

[@rocketseat]

Faaala, Jhonny! Para iniciantes é melhor SASS, pra React ou React Native, é melhor styled components 💜😊

[@Matheus-gq7dk]

No styled components você pode mexer com temas (ex: claro e escuro) com facilidade, já no sass você tem que fazer algumas coisas diferentes e quanto mais escala seu projeto, mais complicado fica. Também vale lembrar que o styled-components é Javascript, então você tem toda a vantagem de implementar if, else, for, direto no código.

[@johnnyferreira6121]

Aí sim. Vlw!!

[@oficinadegeppetto978]

pense em um didática diferenciada

[@JoaoOliveira-fz2nv]

5:15, Da pra usar o " ls " no windows também.

[@rocketseat]

Valeeeu pela dica, João! 💜💜

[@igorsilva736]

só no PowerShell

[@JoaoOliveira-fz2nv]

Praticamente todo dev que usa Windows também usa Powershell

[@wenderteixeira1851]

@@JoaoOliveira-fz2nv Mesmo assim. só funciona no powershell.

[@evertonsantana574]

@@wenderteixeira1851 mas da pra usar no windows

[@codexed-i]

Para Ter Esse Mini Navegador Você Tem Que Ter Electron Na Máquna

[@Rian-pe1nl]

Como faz essa aplicação?

[@fjacyntho]

Mayk, tem uma parte do código que vc tá fazendo copy/paste e se engana, acaba trazendo uma lista no vscode e consegue pegar a linha que precisa do @extend .flexCenter ..., como vc usa ? ou tem algum intelisense no Vscode pra pegar o sass que vc cria, como variáveis $ ou @mixin e @extend, etc... Obrigado por compartilhar...

[@marianaribeiro5692]

Legal, adoro css mas nunca tinha me ligado scss. Estou tendo problema para conectar os arquivos. O que eu escrevo no main.css não aparece automático no main.scss.... alguém sabe o que estou fazendo errado? Agradeço a ajuda

[@ph_martell]

Como faço pra rodar, mine web view. Tentei de várias formas mas sempre da erro. Uma duvida, ele funciona pra Windows ? Se sim como faço.

[@rocketseat]

Faala, Pedro! Você conhece nossa comunidade aberta? Por lá você pode tirar essa e outras dúvidas que tiver 💜💜 Segue o link: www.rocketseat.com.br/comunidade

[@anarktv8098]

Vale a pena utilizar sass em 2021? Empresas exigem isso? tendo em vista as grandes melhorias que tem tido no css, e também o styled components, me surgiu está duvida. Agradeço se alguém puder dar um retorno.

[@jtomio]

Buenas Maykão! Eu estava travado com um projeto aqui, na verdade meu primeiro projeto utilizando o SASS e não estava carregando os códigos do arquivo (style.scss) para o html... no seu vídeo (7:45min) com a diga, eu fiz aqui e foi feito a mágica. Obrigado por ajudar sempre.

[@front-endanimal6359]

nice, man. preprocessor is very need theme!

[@rocketseat]

Thanks!! 💜

[@Andrey1604861912]

Saiu um mixe milke shake

[@RafaelRodrigues-ck6jc]

fala muito rápido

[@lucasdecalves]

Eu to no projeto da empresa aqui utilizando exatamente isso e você não sabe quantas vezes eu ja refiz por falta de organização, agora dividindo em componentes vai ficar bom demais pqp, muito obrigado Rocketseat, valeu mesmo, obrigado Maykão!!!

[@rocketseat]

Vaaaleu pelo feedback, Lucas! 💜💜

[@marcio83]

Vocês já utilizaram o node-sass-chokidar? Bem interessante tbm

[@IvanildoSilvestredaSNeto]

Adorei, Mayk! Adorei, Rocketseat! Muito obrigado! :)

[@CarlosFachini]

Da pra simplificar mais usando o SASS ao inves de SCSS, no sass é eliminado os ponto e virgula e pode eliminar os colchetes "{ }"> Fica mais limpo e dinamico. fica a dica pra quem for aprender

[@gatogaiato]

quando eu abri o site do sass hj eu vi uns exemplos de SASS bem humanamente compreensiveis pra mim, mas daí quando fui olhar a documentação só tinha exemplos de SCSS(que tem um pouco mais de complexidade) e n era oq eu esperava, dai vim aqui pra ver se um video me ajuda a entender SCSS

[@willanalista6192]

Pqp, que aula

[@wilsonsantos9751]

Que aula incrivel , aprendi bastante obrigado Maikão

[@mdfstore-acessoriosemmdf9143]

caramba , porque nao deixarão o bom e velho css direto mesmo

[@hygorbudnys]

Obrigado @MaykBritto & @Rocketseat por tentar ajudar, assim como sempre tenho feito, e abrir a cabeça da maioria dos programadores que nunca se esforçaram para entender de fato, como funciona a estilização em cascata, as reais utilidades e possibilidades do SCSS. A interface Web e o Front-End é muito mais que apenas JavaScript e suas ferramentas, cada qual tem suas responsabilidades e abstrações: HTML = marcação & semântica; CSS = estilização & animação; JavaScript = funcionalidade & interação

[@maykbrito]

SENSACIONAL Hygor!!! Que comentário rico 🚀💜 Obg por isso.

[@rocketseat]

💜💜 Valeeu por esse comentário incrível! 💜

[@JonasDalethese]

Essa aula valeu mais que as 4h do módulo de sass do curso que paguei antes de conhecer a rocket 😢

[@phill.6789]

Video mt bom, mas achei q meus arquivos ficaram muito desorganizados, pois eu utilizava o scout-app e com ele eu criava uma pasta para o CSS e outra para o SASS

[@MizaelClistion]

conhecimento+1; .... Adorei! Padrão Mike de qualidade!

[@alessandrorodrigues9149]

Excelente aula! Parabéns pelo conteúdo!

[@eriveltongoncalo]

Massa demais o sass. Gostei do theme dark do seu VSCode. Qual é o nome deste plugin?

[@maykbrito]

Launchbase Theme

[@rocketseat]

💜

[@antoniojunior8762]

Muito show, Mayk. Valeu por compartilhar. Faz tempo que eu tô querendo reservar um tempo pra entender melho o SASS

[@juliankaww]

Quando vai abrir a turma do launchbase?

[@vyctorhff40]

Show de bola, ótimo vídeo. Obrigado por compartilhar.

[@thiagofigueredo1551]

top

[@CaioCesarPS]

Alguem sabe aonde e como fazer esse app que escuta a porta 3000 como ele fez ai?

[@rocketseat]

Faala, Caio! aos 9:36 ele começa explicar como fazer rodar na porta 3000💜

[@CaioCesarPS]

@@rocketseat oi desculpa, esqueci de colocar que era o app feito com electron que ele mostrou.

[@maykbrito]

@@CaioCesarPS Saiu um vídeo hoje sobre isso :)

[@CaioCesarPS]

@@maykbrito agradecido mayke tu é fera ;)

[@LucasSantos-nx8vy]

Sempre trazendo conteúdo relevante. Parabéns pelo trabalho Mayk Brito

[@maykbrito]

Que bom que gostou Lucas!

[@rocketseat]

💜💜💜💜

[@fs-thiago]

Este vídeo é simplesmente incrível, estive estudando muitos conteúdos por outros lugares, inclusive Sass. Acredite, não parecia tão simples quanto foi explicado aqui. Os conteúdos abordados aqui em geral vencem muitos outros cursos de produção em massa, há uma prática interessante e explicações plausíveis. Sinto que bastava ter começado por esse vídeo e me poupado de outros.

[@LucasFerreira-et7su]

Não tinha idéia que o sass tinha essa capacidade de SUPER poder no CSS, até parece que tá programando em JS. Muito show!

[@maykbrito]

É incrível né? 💜

[@rocketseat]

💜

[@thiagobaia262]

Maike, poderia disponibilizar esse simple web-view pra galera haha

[@joseisaac5025]

Up

[@maykbrito]

github.com/maykbrito/simple-webview

[@thiagobaia262]

@@maykbrito brigadão ♥️

[@rocketseat]

💜💜

[@matheussjusttino]

Muito bom o vídeo! Eu tinha estudado o conteúdo de Sass do Free Code Camp, mas havia alguns conceitos que eu não conseguia imaginar fora do ambiente teórico. O vídeo clareou bastante coisa. Muito obrigado!!!

[@RodrigoLeal]

Sensacional! Tanto a aula quanto o Sass! Parabéns e obrigado!

[@maykbrito]

Obg pelo feedback Rodrigo! 🚀

[@rocketseat]

Maykão é fera né?💜

[@RodrigoLeal]

@@rocketseat Todos vocês da Rocketseat são demais! Ótimo trabalho! Estão ajudando muita gente que precisam e querem aprender mais sobre DEV...

[@nevr0014]

🤯🤯🤯

[@felipedsmartins]

Cara, sempre estudo com conteúdo gringo... tipo the net ninja. Mas você é um cara que se destaca no Brasil e por isso procuro conteúdo que vc ensina. Valeu por sua dedicação e amor pelo que faz. Deus continue te capacitando.

[@jos3ss]

De novo sobre o navegador, kakk. Vc deixou ele disponível pra download? Se não, porque não fazer uma aula montando ou mesmo um vídeo mostrando e liberando pra uso?

[@jos3ss]

Principalmente porque o uso com VS Code parece ser muito bom, então seria interessante ter ele já disponível pra baixar e se possível seria interessante integrar de alguma maneira com VS Code, talvez com uma extensão que faça essa conexão?

[@rocketseat]

Valeeeu pela sugestão, José! 💜💜

[@jos3ss]

@@maykbrito Eu posso configurar ele pra funcionar com Liver Server do VS Code? Se sim, como poço fazer isso?

[@jos3ss]

@@maykbrito Eu posso configurar ele pra funcionar com Liver Server do VS Code? Se sim, como posso fazer isso?

[@gustavojuneo2068]

@@jos3ss o live server funciona na porta 5500 do seu computador, quando você abrir o projeto com o vscode tem um arquivo chamado config.js, lá tem a opção de você trocar a porta para qual você deseja, de deseja utilizar junto com o live-server é só trocar da porta 3000 para a porta 5500

[@RobsonSilvaFernandes]

Top demais essa aula... Maykão é TOP!!!

[@whatskookin6429]

Maykão é fera demais. Não tem jeito!!!

[@mariafantuci1547]

Amo procurar um conteúdo e achar na Rocket, sinto que vou aprender de verdade e de forma descomplicada. Valeu!

[@thiagowerneck1027]

Muito bacana!

[@rocketseat]

Vaaaleu, Thiago! 💜💜

[@aeciocleber]

Command 'Live Sass: Watch Sass' resulted in an error (command 'liveSass.command.watchMySass' not found)

[@rocketseat]

Faala, Aécio! Tudo bom? 💜 Está com alguma dúvida? Você pode tirar ela na nossa comunidade aberta 💜 Segue o link: www.rocketseat.com.br/comunidade

[@aeciocleber]

@@rocketseat Estava sim, mas eu consegui resolver. removendo a pasta da extenção do vscode manualmente reunicando ele e depois instalando novamente funcionou.

[@mateusrosa1]

Pqp q vídeo bom 🤯 parabéns

[@apenasmaisumpensador]

Tua didática é um absurdo meu mestre, quero fazer o curso de JS e se possível de Vue ou react

[@mateushenrique6421]

Gente eu começei a programar com python e um dia esbarei na omnistack e hj desenvolvo nela mas estou acompanhando a serie uma stack que n domino do lucas montano da twitch ele gostei muito do fastapi para python ent estou na duvida se invisto em node ou em python com fastapi oq me recomendam ?

[@rocketseat]

Quanto à performance, não faz diferença, depende dos seus objetivos, como por exemplo, quais empresas quer trabalhar, vagas, etc. 💜💜

[@mateushenrique6421]

@@rocketseat obg

[@gabrielodeborba]

Eu vou utilizar o maps no meu app, mas gostaria de saber se tem uma ferramenta, que me possibilita a adicionar as rotas, e ela me entregue o melhor caminho automaticamente, alguém conhece alguma forma?

[@rocketseat]

Faaala, Gabriel! Você pode usar essa ferramenta aqui: www.mapbox.com/navigation/

[@rogercardoso114]

Olá, preciso de um help, no arquivo de Settings não aparece o código para compressão do css, onde encontro? Curso massa demais, PERFEITO

[@Lucao477]

conseguiu? aqui mesma coisa

[@rogercardoso114]

@@Lucao477 é no settigns jason

[@matheushenrique9924]

Styled componets dar pra fazer isso de forma bem simples. Ex. Cria um arquivo style de cores e dps apenas chama no style q está estilizando a pag

[@rocketseat]

Valeeeu pela dica, Sumart! 💜💜

[@webs4466]

ainda vale a pena focar em aprender sass? ou só conhecer mesmo e estudar os styled components do react?

[@alucard3295]

sass se aprende em pouqíssimo tempo, vale muito a pena

[@RaoneMota]

Maykao tu é muito foda!

[@thiagofelippi5969]

through vai ser o novo length

[@rocketseat]

💜💜💜💜

[@antonioulundo5765]

AINDA NÃO ASSISTI MAS ACHEI INCRÍVEL

[@CosmoAbdon]

Coé, first

[@rocketseat]

👏🏆💜

[@johnsilva3785]

A Rocketseat é sensacional!

[@elvesgomesnevessantos4757]

Sensacional.

[@JoaoVictorPereiraSantos]

Conteúdo muito bom, inclusive vou refatorar alguns projetos meus!!!! heheheh

[@rocketseat]

Boooa, isso aí! 💜

[@tuufe]

Show!

[@rocketseat]

Valeeeu Paulo! 💜💜

[@romimaximus]

Olá ficou show esse tutorial me ajudou muito !! Gosto muito do seu jeito explicar Great teacher .👍..!!..e vcs por acaso teriam um tutorial sobre Webpack ?..

[@rocketseat]

Faala, Romi! Valeu demais pelo seu feedback 💜💜 Mayk é fera né? 💜 Sobre o Webpack, não temos conteúdo sobre isso ainda 💜

[@LeandroSilva-mw5yl]

Excelente aula!!!

[@thenullpointer0x00]

Valeu, Rocketseat! :D

[@rocketseat]

💜💜 É sempre um prazer!

[@fabiobaziota5919]

Mayk a sua didáctica está cada vez mais na velocidade da luz, formidável amei... ♥

[@rocketseat]

Valeeeeu, Fabio! 💜 Maykão é fera né?

[@viniciusjimenez621]

Mayk, qual é o theme que vc usa no seu VS Code?

[@rocketseat]

Faala, Vinícius! 💜 O Maykão desenvolveu um tema próprio, chamado LaunchBase theme 💜

[@potamo1288]

Ou vcs poderiam fazer um video sobre pug ou sobre gulp, ajudam muito vlw

[@rocketseat]

Valeeeu pela sugestão, Luis! 💜

[@potamo1288]

@@rocketseat e tois

[@brunosantosdearaujo308]

Muito bom o vídeo , qual é o tema que vc está utilizando? Curti muito esse tema

[@maykbrito]

É um tema que eu fiz aqui de forma experimental. rsrs Entra no VSCode na parte de extensões e digita: Launchbase Theme

[@brunosantosdearaujo308]

@@maykbrito opa! Muito obg por responder vou entrar agora mesmo e instalar, curto muito o seu trabalho , continue sempre passando bons conhecimentos e ensinamentos

[@rocketseat]

💜💜💜

[@tarciziobarbosa9532]

Mayk vc nasceu pra ensinar olha. Didática incrível.

[@maykbrito]

Tarcizio meu querido. Obrigado DEMAIS!

[@rocketseat]

Ele arrasa né? 💜

[@eltonrodrigues5786]

salve Maikão!!!

[@rocketseat]

#MaykãoTop

[@maykbrito]

Salve Eltonzão

[@juniord_osbel]

Mayk mlhr professor 👌

[@rocketseat]

Maykão é fera né?

[@maykbrito]

Junior o melhor aluno 🥰

[@juniord_osbel]

Ai meu corazaum💘