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

[@daywisonsilva4048]

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

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

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

[@elvesgomesnevessantos4757]

Sensacional.

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

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

[@altamirsantos6030]

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

[@rocketseat]

Vaaaleu, Altamir! 💜💜

[@alessandrorodrigues9149]

Excelente aula! Parabéns pelo conteúdo!

[@mariafantuci1547]

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

[@Fernando-du5uj]

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

[@whatskookin6429]

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

[@IvanildoSilvestredaSNeto]

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

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

[@antoniojunior8762]

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

[@oficinadegeppetto978]

pense em um didática diferenciada

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

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

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

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

[@LucasSantos-nx8vy]

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

[@maykbrito]

Que bom que gostou Lucas!

[@rocketseat]

💜💜💜💜

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

[@johnsilva3785]

A Rocketseat é sensacional!

[@wilsonsantos9751]

Que aula incrivel , aprendi bastante obrigado Maikão

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

[@vyctorhff40]

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

[@fabiobaziota5919]

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

[@rocketseat]

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

[@RobsonSilvaFernandes]

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

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

[@RaoneMota]

Maykao tu é muito foda!

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

💜

[@tuufe]

Show!

[@rocketseat]

Valeeeu Paulo! 💜💜

[@thiagowerneck1027]

Muito bacana!

[@rocketseat]

Vaaaleu, Thiago! 💜💜

[@apenasmaisumpensador]

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

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

[@LeandroSilva-mw5yl]

Excelente aula!!!

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

😍

[@tarciziobarbosa9532]

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

[@maykbrito]

Tarcizio meu querido. Obrigado DEMAIS!

[@rocketseat]

Ele arrasa né? 💜

[@juniord_osbel]

Mayk mlhr professor 👌

[@rocketseat]

Maykão é fera né?

[@maykbrito]

Junior o melhor aluno 🥰

[@juniord_osbel]

Ai meu corazaum💘

[@MizaelClistion]

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

[@eriveltongoncalo]

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

[@maykbrito]

Launchbase Theme

[@rocketseat]

💜

[@antonioulundo5765]

AINDA NÃO ASSISTI MAS ACHEI INCRÍVEL

[@matheusaraujo8617]

realmente a rocktseat lé mentes, kkk

[@rocketseat]

Temos alguns poderes especiais 👀🔮

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

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

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

[@JonasDalethese]

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

[@蕭條傷心]

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

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

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

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

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

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

[@mateusrosa1]

Pqp q vídeo bom 🤯 parabéns

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

💜💜💜

[@JoaoGomes-wy8gu]

Conteúdo fantástico !!!

[@rocketseat]

Vaaleu, João! 💜💜

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

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

[@digitalhdr7768]

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

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

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

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

[@NeuroDataLabs]

Top! 💜

[@rocketseat]

Valeeeu ! 💜💜 Mayk arrasa né? 💜

[@juliankaww]

Quando vai abrir a turma do launchbase?

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

[@nevr0014]

🤯🤯🤯

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

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

[@front-endanimal6359]

nice, man. preprocessor is very need theme!

[@rocketseat]

Thanks!! 💜

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

[@Rian-pe1nl]

Como faz essa aplicação?

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

💜💜

[@willanalista6192]

Pqp, que aula

[@tiagocabral5401]

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

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

[@thiagofigueredo1551]

top

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

💜

[@kleberpereira8503]

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

[@mrlagmaster3524]

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

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

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

[@marcio83]

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

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

[@The96tiago]

o tailwind foi feito com sass, certeza

[@Andrey1604861912]

Saiu um mixe milke shake

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

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

[@filipemelo1107]

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

[@rocketseat]

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

[@thiagofelippi5969]

through vai ser o novo length

[@rocketseat]

💜💜💜💜

[@igorsilva736]

12:42 esse é meu jeito CSS de ser

[@rocketseat]

😂😂💜

[@eltonrodrigues5786]

salve Maikão!!!

[@rocketseat]

#MaykãoTop

[@maykbrito]

Salve Eltonzão

[@JoaoVictorPereiraSantos]

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

[@rocketseat]

Boooa, isso aí! 💜

[@andersonsouza6885]

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

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

[@codexed-i]

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

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

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