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

[@RonanTI]

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

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

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

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

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

[@mr-tomio]

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.

[@alessandrorodrigues9149]

Excelente aula! Parabéns pelo conteúdo!

[@altamirsantos6030]

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

[@rocketseat]

Vaaaleu, Altamir! 💜💜

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

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

[@IvanildoSilvestredaSNeto]

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

[@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! 💜💜

[@Fernando-du5uj]

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

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

[@wilsonsantos9751]

Que aula incrivel , aprendi bastante obrigado Maikão

[@vyctorhff40]

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

[@johnsilva3785]

A Rocketseat é sensacional!

[@antoniojunior8762]

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

[@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! 💜

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

[@gustavoranci2265]

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

[@LeandroSilva-mw5yl]

também queria saber... descobriu amigo?

[@RobsonSilvaFernandes]

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

[@oficinadegeppetto978]

pense em um didática diferenciada

[@LucasSantos-nx8vy]

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

[@maykbrito]

Que bom que gostou Lucas!

[@rocketseat]

💜💜💜💜

[@valdeir125]

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

[@rocketseat]

Valeeeu demais, Valdeir! 💜 😍

[@elvesgomesnevessantos4757]

Sensacional.

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

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

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

💜

[@fabiobaziota5919]

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

[@rocketseat]

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

[@tarciziobarbosa9532]

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

[@maykbrito]

Tarcizio meu querido. Obrigado DEMAIS!

[@rocketseat]

Ele arrasa né? 💜

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

[@RaoneMota]

Maykao tu é muito foda!

[@LeandroSilva-mw5yl]

Excelente aula!!!

[@MizaelClistion]

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

[@thiagoguimaraes6501]

Vi sass a uns dias mexendo com essas ides online, já soltei o like de cara! A RocketSeat e maikao são brutais!!!🖖💻

[@rocketseat]

Vaaleu, Thiago!! 💜💜 Eles são feras mesmo! 💜

[@maykbrito]

😍

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

[@juniord_osbel]

Mayk mlhr professor 👌

[@rocketseat]

Maykão é fera né?

[@maykbrito]

Junior o melhor aluno 🥰

[@juniord_osbel]

Ai meu corazaum💘

[@matheusaraujo8617]

realmente a rocktseat lé mentes, kkk

[@rocketseat]

Temos alguns poderes especiais 👀🔮

[@apenasmaisumpensador]

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

[@antonioulundo5765]

AINDA NÃO ASSISTI MAS ACHEI INCRÍVEL

[@Hustto983]

Mano que professor viu o cara é top pena que todos fazem esse trabalho tão perfeito

[@rocketseat]

Maykão é 10! 💜

[@rocketseat]

Valeeeu pelo feedback, Francisco! 💜

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

[@JonasDalethese]

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

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

[@thiagowerneck1027]

Muito bacana!

[@rocketseat]

Vaaaleu, Thiago! 💜💜

[@eriveltongoncalo]

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

[@maykbrito]

Launchbase Theme

[@rocketseat]

💜

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

[@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! 💜💜

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

💜💜💜

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

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

[@JoaoGomes-wy8gu]

Conteúdo fantástico !!!

[@rocketseat]

Vaaleu, João! 💜💜

[@digitalhdr7768]

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

[@mateusrosa1]

Pqp q vídeo bom 🤯 parabéns

[@蕭條傷心]

*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...*

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

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

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

💜

[@tuufe]

Show!

[@rocketseat]

Valeeeu Paulo! 💜💜

[@front-endanimal6359]

nice, man. preprocessor is very need theme!

[@rocketseat]

Thanks!! 💜

[@juliankaww]

Quando vai abrir a turma do launchbase?

[@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! 💜

[@Rian-pe1nl]

Como faz essa aplicação?

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

[@thenullpointer0x00]

Valeu, Rocketseat! :D

[@rocketseat]

💜💜 É sempre um prazer!

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

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

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

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

[@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 ;)

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

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

[@kleberpereira8503]

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

[@tiagocabral5401]

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

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

[@mrlagmaster3524]

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

[@bim-techs]

Mayk, como ficaria a estruturação de um projeto React utilizando o Sass ? Mudaria muita coisa da abordagem que o Diego utiliza ? Ele costuma criar uma pasta pra cada componente e em cada pasta fica o "styles.css" daquele componente específico. Então, nesse caso, continuaria o mesmo padrão ? Agradeceria muito caso alguém da Rocketseat me respondesse !

[@devmikecry]

Eu costumo fazer dessa forma aí que vc falou quando uso sass: pra cada componente tenho um index.js e un styles.scss, e pra estilos globais crio uma pasta styles na pasta src do projeto

[@gustavojuneo2068]

Atualmente quando você utiliza o styled-components no react ele jáa vem com a syntax do sass, o que é preferível já que o styled-components te da muitas opções lado a lado com os components, se tiver interesse tem vídeo no canal da rocketseat explicando como usar o styled-components.

[@maykbrito]

Fala Renato. Acredito que essa documentação vai te dar uma luz create-react-app.dev/docs/adding-a-sass-stylesheet/

[@rocketseat]

💜💜

[@marcio83]

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

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

[@JoaoVictorPereiraSantos]

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

[@rocketseat]

Boooa, isso aí! 💜

[@NeuroDataLabs]

Top! 💜

[@rocketseat]

Valeeeu ! 💜💜 Mayk arrasa né? 💜

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

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

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

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

[@The96tiago]

o tailwind foi feito com sass, certeza

[@andersonsouza6885]

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

[@Andrey1604861912]

Saiu um mixe milke shake

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

[@thiagofelippi5969]

through vai ser o novo length

[@rocketseat]

💜💜💜💜

[@filipemelo1107]

Qual a diferença entre o SASS e o LESS?

[@rocketseat]

Faala, Filipe! 💜 É praticamente a mesma coisa, só muda a sintaxe 💜

[@nevr0014]

🤯🤯🤯

[@willanalista6192]

Pqp, que aula

[@thiagobaia262]

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

[@joseisaac5025]

Up

[@maykbrito]

github.com/maykbrito/simple-webview

[@thiagobaia262]

@@maykbrito brigadão ♥️

[@rocketseat]

💜💜

[@igorsilva736]

12:42 esse é meu jeito CSS de ser

[@rocketseat]

😂😂💜

[@thiagofigueredo1551]

top

[@codexed-i]

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