Dê super poderes ao CSS com SASS | Masterclass #15
ฝัง
- เผยแพร่เมื่อ 26 ส.ค. 2024
- 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
Pqp, hoje eu abri o site do sass pensando "ta na hora de estudar isso". Nossa, fiquei até assustado. Valeu rocketseat :)
Temos certos poderes... 🔮👀 😂😂💜
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!
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.
Eita Raphael! Que honra. Admiro demais esses mestres que você citou. Obrigado por tamanho carinho💜
Ele é fera né?💜💜💜
@@rocketseat com certeza
Só uma dica, a documentação recomenda que usemos o @use ao invés do @Import.
x=2+"2";
if(x="22")
{
x = 5;
}
2+2=5
Muito interessante o sass,com grandes poderes grande responsabilidades!
É nada, tava estudando por conta, e me vem isso ??? Sensacional :')
Vaaaleu, Altamir! 💜💜
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.
O compile do SASS não aparece no meu setting.json
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.
Caraca velho, me apaixonei por SASS. Muito obrigado pela aula e por essa excelente didática, Mayk. Abraço, querido.
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.
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!!!
Vaaaleu pelo feedback, Lucas! 💜💜
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.
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
Amo procurar um conteúdo e achar na Rocket, sinto que vou aprender de verdade e de forma descomplicada. Valeu!
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
SENSACIONAL Hygor!!! Que comentário rico 🚀💜 Obg por isso.
💜💜 Valeeu por esse comentário incrível! 💜
Mayk a sua didáctica está cada vez mais na velocidade da luz, formidável amei... ♥
Valeeeeu, Fabio! 💜 Maykão é fera né?
Parabéns Pelo conteúdo Rocketseat que conteúdo incrível!!!!
Valeeeu demais, Valdeir! 💜 😍
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!!!
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!
É incrível né? 💜
💜
Maykão é fera demais. Não tem jeito!!!
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!
Tmj Math!
Vi sass a uns dias mexendo com essas ides online, já soltei o like de cara! A RocketSeat e maikao são brutais!!!🖖💻
Vaaleu, Thiago!! 💜💜 Eles são feras mesmo! 💜
😍
Muito show, Mayk. Valeu por compartilhar. Faz tempo que eu tô querendo reservar um tempo pra entender melho o SASS
Sensacional! Tanto a aula quanto o Sass! Parabéns e obrigado!
Obg pelo feedback Rodrigo! 🚀
Maykão é fera né?💜
@@rocketseat Todos vocês da Rocketseat são demais! Ótimo trabalho! Estão ajudando muita gente que precisam e querem aprender mais sobre DEV...
Sempre trazendo conteúdo relevante. Parabéns pelo trabalho Mayk Brito
Que bom que gostou Lucas!
💜💜💜💜
Adorei, Mayk! Adorei, Rocketseat! Muito obrigado! :)
realmente a rocktseat lé mentes, kkk
Temos alguns poderes especiais 👀🔮
5:15, Da pra usar o " ls " no windows também.
Valeeeu pela dica, João! 💜💜
só no PowerShell
Praticamente todo dev que usa Windows também usa Powershell
@@JoaoOliveira-fz2nv Mesmo assim. só funciona no powershell.
@@wenderteixeira1851 mas da pra usar no windows
pense em um didática diferenciada
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
Valeeu pela dica e pelo feedback, Luis! 💜
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
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?
Faz um tutorial desse "navegadorzinho" ai, namoral... Valeu!
hehehehehe 🥰
💜
github.com/maykbrito/simple-webview
@@maykbrito ¹
@@JohannyLS não da certo, apresenta erro
Que aula incrivel , aprendi bastante obrigado Maikão
Tua didática é um absurdo meu mestre, quero fazer o curso de JS e se possível de Vue ou react
A Rocketseat é sensacional!
Show de bola, ótimo vídeo. Obrigado por compartilhar.
Mayk vc nasceu pra ensinar olha. Didática incrível.
Tarcizio meu querido. Obrigado DEMAIS!
Ele arrasa né? 💜
Essa aula valeu mais que as 4h do módulo de sass do curso que paguei antes de conhecer a rocket 😢
Como você abriu aquela janela de cópias anteriores, no minuto 57:29?
Gostei demais!
também queria saber... descobriu amigo?
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
Valeeeu pela dica, Sumart! 💜💜
Excelente aula! Parabéns pelo conteúdo!
conhecimento+1; .... Adorei! Padrão Mike de qualidade!
Top demais essa aula... Maykão é TOP!!!
*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...*
Muito bacana!
Vaaaleu, Thiago! 💜💜
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
Mano que professor viu o cara é top pena que todos fazem esse trabalho tão perfeito
Maykão é 10! 💜
Valeeeu pelo feedback, Francisco! 💜
nice, man. preprocessor is very need theme!
Thanks!! 💜
AINDA NÃO ASSISTI MAS ACHEI INCRÍVEL
Maykao tu é muito foda!
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.
Show!
Valeeeu Paulo! 💜💜
Todas as vezes que eu habilito o Copilador do SASS, esse Output fica aparecendo o tempo todo automaticamente. Como desabilita isso?
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.
Mayk mlhr professor 👌
Maykão é fera né?
Junior o melhor aluno 🥰
Ai meu corazaum💘
Excelente aula!!!
Sensacional.
Valeu, Rocketseat! :D
💜💜 É sempre um prazer!
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 ?..
Faala, Romi! Valeu demais pelo seu feedback 💜💜 Mayk é fera né? 💜
Sobre o Webpack, não temos conteúdo sobre isso ainda 💜
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
Uma dica a qualidade do video esta péssima, por favor mude !!! Video muito bom
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.
[Como resolvo] ?
Error: -13
/kleber
EACCES: permission denied, mkdir '/kleber'
Meu sistema é o Linux Mint
Vocês já utilizaram o node-sass-chokidar? Bem interessante tbm
Cara, sass ou styled components? Estou iniciando um novo projeto e estou com essa dúvida
Up
Faaala, Jhonny! Para iniciantes é melhor SASS, pra React ou React Native, é melhor styled components 💜😊
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.
Aí sim. Vlw!!
Quando eu digito @import ' base ';da um erro no visual studio code e o sass para de funcionar
Massa demais o sass. Gostei do theme dark do seu VSCode. Qual é o nome deste plugin?
Launchbase Theme
💜
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...
Pqp q vídeo bom 🤯 parabéns
o tailwind foi feito com sass, certeza
Conteúdo fantástico !!!
Vaaleu, João! 💜💜
Como faz essa aplicação?
through vai ser o novo length
💜💜💜💜
Quando vai abrir a turma do launchbase?
Meu settings.json não está trazendo (8:17 min) não está trazendo estas informações. Alguém pode ajudar ?
Quando instalei o plugin no VSCode, veio sozinho. Se copiar o meu, será que dá certo?
💜
@@maykbrito funcionou !
Valeu Maikão
no meu não apareceu esse -webkit- 23:50 se alguém souber porque me fale.
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?
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?
Valeeeu pela sugestão, José! 💜💜
@@maykbrito Eu posso configurar ele pra funcionar com Liver Server do VS Code? Se sim, como poço fazer isso?
@@maykbrito Eu posso configurar ele pra funcionar com Liver Server do VS Code? Se sim, como posso fazer isso?
@@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
Conteúdo muito bom, inclusive vou refatorar alguns projetos meus!!!! heheheh
Boooa, isso aí! 💜
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
Eu gostaria de fazer esse navegadorzinho... alguém pode me dizer onde encontro info para poder fazer?
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
💜
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 !
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
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.
Fala Renato. Acredito que essa documentação vai te dar uma luz
create-react-app.dev/docs/adding-a-sass-stylesheet/
💜💜
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.
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
🤯🤯🤯
Saiu um mixe milke shake
Top! 💜
Valeeeu ! 💜💜 Mayk arrasa né? 💜
top
ainda vale a pena focar em aprender sass?
ou só conhecer mesmo e estudar os styled components do react?
sass se aprende em pouqíssimo tempo, vale muito a pena
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
conseguiu? aqui mesma coisa
@@Lucao477 é no settigns jason
Pqp, que aula
Para Ter Esse Mini Navegador Você Tem Que Ter Electron Na Máquna
Muito bom o vídeo , qual é o tema que vc está utilizando? Curti muito esse tema
É um tema que eu fiz aqui de forma experimental. rsrs Entra no VSCode na parte de extensões e digita: Launchbase Theme
@@maykbrito opa! Muito obg por responder vou entrar agora mesmo e instalar, curto muito o seu trabalho , continue sempre passando bons conhecimentos e ensinamentos
💜💜💜
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 ?
Quanto à performance, não faz diferença, depende dos seus objetivos, como por exemplo, quais empresas quer trabalhar, vagas, etc. 💜💜
@@rocketseat obg
Mayk, qual é o theme que vc usa no seu VS Code?
Faala, Vinícius! 💜 O Maykão desenvolveu um tema próprio, chamado LaunchBase theme 💜
12:42 esse é meu jeito CSS de ser
😂😂💜
Qual a diferença entre o SASS e o LESS?
Faala, Filipe! 💜 É praticamente a mesma coisa, só muda a sintaxe 💜
Maike, poderia disponibilizar esse simple web-view pra galera haha
Up
github.com/maykbrito/simple-webview
@@maykbrito brigadão ♥️
💜💜
Quero nem saber mais de SASS depois do Tailwind.
Ou vcs poderiam fazer um video sobre pug ou sobre gulp, ajudam muito vlw
Valeeeu pela sugestão, Luis! 💜
@@rocketseat e tois
salve Maikão!!!
#MaykãoTop
Salve Eltonzão
Alguem sabe aonde e como fazer esse app que escuta a porta 3000 como ele fez ai?
Faala, Caio! aos 9:36 ele começa explicar como fazer rodar na porta 3000💜
@@rocketseat oi desculpa, esqueci de colocar que era o app feito com electron que ele mostrou.
@@CaioCesarPS Saiu um vídeo hoje sobre isso :)
@@maykbrito agradecido mayke tu é fera ;)