Como usar o Sass no Next?

fala Mestres beleza no vídeo de hoje nós vamos dar uma olhada aqui em Como usar o sas no next né o sas para quem não sabe é uma evolução do CSS seria um super set aí ele adiciona um compilador o nosso CSS ele passa a ser mais interpretado de uma forma diferente né então a gente começa a ganhar diferentes habilidades aí para est usando no CSS e vocês vão ver aí um pouco um pedacinho e desses benefícios que a gente tem aqui nessa aula Tá certo então antes da gente ir pro vídeo eu gostaria de

Você deixa um like no vídeo se inscreva no canal e também acompanha a gente nas nossas redes os links estarão todos aí na descrição meu nome é jancer sou desenvolvedor aqui na Mestres e bora lá para mais um [Música] conteúdo bom já tô aqui no nosso projeto né esse projeto a gente vem desenvolvendo ao longo das aulas então tem bastante conteúdo aqui de diferentes aulas mas como isso aqui a gente vai falar sobre o CSS né E a gente vai criar um componente aqui de exemplo eu vou aplicar isso aqui na nossa tela inicial né

que seria na home aqui na raiz do nosso projeto Então eu vou deixar esse Hello from home screen a gente já tem alguns estilos aqui que seria que a gente aplicou né no na aula de CSS modular o background color tá comentado Então eu vou deixar assim e para iniciar né para usar o sas basicamente a gente precisa instalar o pacote né então aqui eu rodo aqui no terminal pem instal SAS tá que esse aqui vai ser o pacote que vai gerar gerir aí o nosso CSS e no final compilar ele para pro CSS modular

tá vai ser uma mistura a gente vai usar a ideia do CSS modular que seria a gente ter um CSS separado em módulos e esses módulos a gente não vai ter conflito entre os nomes das classes e por cima disso né por cima dessa ideia a gente vai aplicar aí a sintaxe diferente a nova forma de trabalhar com CSS que seria o sas tá então eu instalei o pacote eu já posso rodar aqui o nosso projeto né npm R e com o pacote instalado basicamente a gente já pode criando os arquivos tá então aqui na

raiz do projeto eu vou criar um diretório chamado Styles pra gente organizar um pouco isso aqui eu vou criar um arquivo chamado settings settings pmu P scss tá o sas ele ele vem em duas variações tem o sas o s ss né que ele tem uma uma notação diferente e nós temos o o scss tá SAS né com a s s e o scss que seria um o supet a anotação mais parecida com CSS e é a mais usada também tá então é basicamente sintaxe são basicamente sintaxes diferentes mas no final O resultado é o

mesmo então vou criar esse arquivo né scss E aqui basicamente o que eu vou fazer é eu vou criar Na verdade uma variável eu vou chamar essa variável de primary color e isso aqui vai ser um Deixa eu ver se eu tenho alguma cor aqui pode ser pode ser um azul eu tenho aqui as minhas referên esse azul aqui ó Sem problema então eu o o que o que qual qual seria né um dos benefícios um dos maiores benefícios que a gente tem com com o com SAS né que seria aqui o scss mas sempre

que eu falar SAS é a mesma coisa a gente consegue importar os arquivos tá então eu facilita essa minha configuração e dentro de um arquivo SAS eu importo outro arquivo sas e a gente começa a ter aí essa conversa entre arquivos o que facilita bastante a criação a estruturação a herança aí eh de vários estilos então que por exemplo eu tô criando esse arquivo de configuração onde eu tenho um variável que é um basicamente poderia ser classes aí no caso aqui são variáveis de de cor né onde eu vou exportar essas cores e com esse

arquivo criado eu vou fazer o seguinte eu vou criar uma componente e a gente vai usar essa componente aqui na raiz pra gente ver os estilos se aplicando nela Então aqui em component eu vou criar um novo diretório vou chamar isso aqui de card Vamos criar um card aí com um card com a borda com animação de Rover ali quando a gente bota o mouse em cima pra gente brincar um pouco com o CSS então aqui dentro de componentes né Card vou criar um arquivo que seria o index tsx né que é basicamente a componente

Então vou criar aqui a componente Card essa componente ela vai retornar uma div e dentro dela vai ter o tilder né que seria o o conteúdo que eu passar dentro aí desse meu Card Então vou criar aqui uma interface ó tudo bem simples tá Card props aqui eu teria o ti e é um react react node então aqui em Card eu vou criar vou passar o tipo né E aqui dentro eu já vou conseguir e extrair o meu tilder para passar dentro da div então um card extremamente simples é só um contêiner ali por fora

e aqui dentro do diretório de card eu vou criar um novo arquivo que vai ser o arquivo de estilo tá então vou chamar de Styles p module p SAS beleza e aqui dentro desse arquivo eu vou definir as minhas classes já com anotação do SAS tá então o que que eu posso fazer aqui de car já eu posso importar então a gente passa aqui Import o destino eu vou importar o qu eu vou importar lá minhas cores ó o estilos o settings pm. SAS n que é basicamente a cor primária n que é o primeiro

arquivo que Nós criamos então com isso aqui eu já posso definir a classe que eu quero que no caso é a classe do c né e aqui eu posso passar os estilos para ela eu já tenho os estilos prontos aqui Então não vamos perder tempo digitando né que seria basicamente eu tô aplicando aqui imgem pading alinhando o texto né é borda transição entre as cores então isso aqui é o CSS comum tá dentro de uma classe também comum até então nada de diferente e o que que eu vou fazer aqui no meu Card eu vou

importar esses estilos igual a gente faz lá no CSS modos normal né então vou chamar isso aqui de Styles from esse meu arquivo né o arquivo SAS E aí com esse estilo criado eu vou passar na minha div né então Class name vai ser Styles pcard que é a classe que eu criei aqui dentro da minha do meu arquivo SAS certo então salvo salvando tudo vamos aqui no Browser carregar aqui o nosso a nossa aplicação eu tenho aqui um Hello Home Screen n que é aela é essa aqui então aqui depois desse H1 eu vou

usar o meu Card certo que é componente que eu acabei de criar eu não exportei né então vamos exportar aqui ó Export Def Card eu vou importar ele aqui e como a gente precisa de um Children né eu vou ter que passar algum conteúdo aqui dentro dele que também V passar um H2 que seria o título né e um parágrafo conteúdo do card nada muito complexo não então vamos voltar aqui no navegador e o meu Card já tá aqui né a gente pode ver que ele já tem uma borda Vamos dar um zoom aqui bem

de perto Já temos um bord aqui já temos o título né o estilo tá sendo aplicado Qual estilo é esse é o estilo que nós definimos aqui no meu CS modular tá então quando que começa a vir as a sintaxe diferente do SAS né que a gente vai fazer aqui basicamente é um quando a gente faz o Hover né que seria aí um evento o evento de Rover aí no no HTML então coloco EC comercial dois pontos e aqui eu já consigo pegar ó Hover eu já posso passar Chaves e definir o estilo que eu

quero quando isso is acontecer então a gente começa a conseguir aninhar os estilos bem mais fácil né de uma forma bem mais legível bem mais compreensível que que a gente já é acostumado a fazer isso no JavaScript né então é uma anotação uma forma de escrever o estilo que fica bem mais confortável então aqui no Rover por exemplo eu posso passar a cor que seria a minha variável primary color e aqui ele já conhece que primary color é a cor que eu defini no outro arquivo né E eu importei então eu posso passar a cor

do no caso esse color seria do texto né e eu tenho também a cor da borda border color que é também a minha primary color E se eu salvo isso aqui e a gente voltar no nosso na nossa aplicação né quando eu faço o Hover ele aplica esse estilo que eu defini tá então essa essa essa vantagem que nós temos né de conseguir fazer o alinhamento ajuda muito a gente e a definir os estilos e Existem várias outras features né do SAS aí a gente não vai explorar todas aqui porque como eu falei isso aqui

não é um não vai para ser um curso de SAS é basicamente a gente vê como usar o sas no next que é extremamente simples né o Next ele já porta a gente precisa instalar o pacote e a gente já pode começar a criar ã os nossos arquivos aí do SAS PR gente usar na nossa aplicação então eu consigo eu poderia continuar alinhando aqui né que seria aplicar o estilo lá no nosso H2 né com H2 que tá dentro de card né que seria dentro da minha div eu posso por exemplo mexer na fonte né

Vamos definir aqui um fonte size e no meu parágrafo também també eu posso definir o tamanho da fonte só pra gente Vou definir um pouco maior mas aqui já seria ã detalhes aí do CSS né aplicação o funcionamento disso aqui já é o CSS comum tá a vantagem de fato aí é tá usando o sas que para quem não conhece eu vou deixar os links de referências aí na descrição para você conseguir explorar um pouco mais aprender um pouco mais o sas e ver os benefícios que nós temos eu poderia eu posso até produzir também

um vídeo aqui Ou uma série de vídeos sobre SAS e caso vocês se interessem deixem aí nos comentários que a gente pode estar produzindo esse conteúdo e trazendo para cá Beleza então para essa aula é isso eu espero que eu tenha ajudado qualquer dúvida pode estar deixando um comentário logo abaixo e é isso aí muito obrigado e até a [Música] próxima n