Aprenda Sass em 25 Minutos | Curso Rápido de Sass

muito bem pessoal nessa aula nós vamos aprender a respeito do SAS ou o CSS com super poderes o super CSS SAS ou SAS é uma sigla que em inglês significa folhas de estilo sintaticamente impressionantes a pronúncia disso aqui é bizarra dá uma olhada É isso aí folhas de estilo sintaticamente impressionantes ou em outras palavras é como se fosse uma linguagem de programação com várias recursos que o CSS normal não tem como variáveis importações até funções ele tem e que você pode usar para gerar um arquivo CSS de forma automática a partir desse recurso do super CSS ele precisa ser compilado transformado no CSS comum porque o nosso navegador ele não entende super do INSS Ele só entende o CSS e foi criado para a gente melhorar em produtividade ficar mais fácil a manutenção do código de arquivo CSS e muito extensos então é muito legal muito interessante e importante aprender o sas para começar a nossa aula eu já deixei preparado aqui um arquivinho HTML bem básico bem simples com reader um título um botão e uma outra dívida com a classe contato um título dois e um outro botão que é só para a gente ter alguma coisinha para a gente ver ali no navegador e a gente poder trabalhar com o CSS o scss ou sazo Super CSS ele não é interpretado normalmente pelos navegadores então ele precisa compilar precisa transformar o código dele em CSS normal tem um recurso aqui do vs code que é fantástico você vem aqui em extensões você digita lives com pyler E aí esse segundo item aqui ó você vai poder instalar essa extensão que é parecida com Live server que a gente tem né A gente trabalha normalmente com HTML que ele já vai mostrando os resultados em tempo real mas o que que acontece com esse live sasu com o Tyler ele vai convertendo SAS em CSS convencional ele faz a compilação então ele facilita bastante ele faz isso automaticamente quando você ativa essa extensão então facilita muito se por um acaso você nem sabe o que quer ver esse Cold caiu aqui de paraquedas então te recomendo ver o vídeo que eu falo sobre a instalação e configuração dele para continuar aqui essa aula então você vem aqui clica em instalar o meu já tá instalado aqui o teu vai ter um botão aí instalar aí você instala Beleza então voltando aqui no nosso explorador como que ele funciona você vai criar aqui vamos criar uma pasta chamada Styles estilos onde a gente coloca o nosso CSS e aqui eu vou fazer um arquivo chamado index. s então lembra que scss é como se fosse super CSS Então essa é a extensão do SAS beleza scss ele até faz esse símbolozinho aqui rosa como um s que é o símbolo do SAS Você Dá um enter quando você fizer isso aqui embaixo vai aparecer para você ó WhatsApp que é a extensão que a gente acabou de instalar ali que faz com que compile de super CSS para CSS normal então vou fazer qualquer coisa básica que vou fazer a nossa tag reader nosso seletor reader vou fazer que ele vai ter um display do tipo Flex e vamos fazer que ele vai ter um background Blue beleza nada demais isso aqui é CSS convencional mas só para mostrar para vocês o que que acontece quando a gente fizer aqui um watch sass aqui embaixo clicou em watch ele vai já automaticamente compilar isso e gerar para nós um arquivo index. css que vai ter as propriedades já convertidas para CSS ele também gera um index.

css. net que é um arquivo ali de localização dos itens do nosso CSS e tal isso aqui é mais para desenvolvimento e a gente não usa tanto de produção tanto que geralmente a gente deleta esse arquivo depois quando a gente for colocar o projeto em produção Beleza então que interessa para nós aqui é o index. s e o index.

s que é o arquivo CSS propriamente dita então qualquer coisa que eu fizer de alteração aqui no meu scss por exemplo vou dizer que o Collor é o White se eu salvar ele já vai compilar para mim e já lá no meu arquivo CSS convencional ele já vai ter colocado Aquela aquele atributo para mim aquela propriedade lá no nosso arquivo então HTML nós precisamos referenciar aqui a folha de estilo do nosso CSS normal Lembrando que o navegador não lê super CSS super CSS é só como se fosse um molde que você usa para gerar o teu arquivo CSS então aqui eu vou falar que é folha de estilo né está ali shift aqui no nosso HF vamos apontar para Nossa pasta stiles nosso index. css é esse que a gente tem que apontar beleza E se a gente rodar aqui com o Live server você vai ver que tá funcionando lá o que a gente tem lá no nosso arquivo CSS normalmente Ok então vamos começar agora a aprender efetivamente a sintaxe a maneira de você usar o sas e porque que ele é tão interessante a primeira coisa que você tem com Sasuke é legal são as variáveis e você vai perceber que a sintaxe do SAS é muito parecida até que o Jay Carey a forma de você criar variáveis com PHP também a gente usa o cifrão se você já trabalha com outras linguagens de programação Com certeza você entende muito bem o conceito de variáveis que é como se fosse uma palavra que a gente vai colocar algum conteúdo dentro como se fosse um pote que a gente coloca alguma coisa dentro então por exemplo assim eu posso chamar aqui ó de primário por exemplo de cor primária eu vou colocar dois pontos e aqui eu posso dizer que primário vai ser bluetoot é azul que é uma cor então eu atribui a essa variável chamada primária a cor azul isso aqui a gente é hoje em dia já pode fazer com CSS usando root né o CSS convencional mas no SSS é a gente trabalha assim então você faz uma variável usando o cifrão e o nome da palavra que você quer e a propriedade que ela vai ter então por exemplo aqui eu posso trocar esse Blue aqui agora pela variável primário tá vendo dessa forma se a gente rodar a gente for lá no nosso projeto a gente vai ver que não mudou nada tá funcionando tudo normal por que que isso aqui é legal porque que isso aqui é uma vantagem se você for lá no teu index. css você vai ver que vai aparecer lá ó escrito Blue só mas imagine o seguinte imagina que eu tivesse aqui ó um reader Button e aqui eu tivesse que ele também vai ter o background dele a cor do fundo Blue né E aí eu tivesse outra coisa que seria a nossa o nosso contato e aqui eu faço para o background dele também vai ser Blue dessa forma se de repente mais para frente eu quero alterar esse projeto e mudar essa cor eu ia ter que em cada um desses itens procurar a cor e trocar ou então dar um control F substituir tudo e tal aquela coisa toda mas ia acabar podendo tirar cores de outros atributos que a gente não queria dessa forma quando a gente cria uma variável aqui em cima a gente pode usar essa variável nos lugares onde a gente vai precisar por exemplo aqui eu vou usar aqui e aqui OK aí ó olha o que que vai acontecer beleza ficou tudo azul agora se eu precisasse trocar no meu código essa cor para outra cor eu simplesmente venho aqui troca essa cor salvo e beleza olha só já vai tá tudo com aquela cor ali então eu tenho uma variável que eu posso usar em vários lugares O legal que quando ele gera meu arquivo CSS ele vai colocar a cor ali legal então fica bem interessante esse é o primeiro conceito conceito de variáveis outro conceito importante aqui do SAS é o de agrupamento quer dizer você juntar várias coisas é para Um item principal vamos dizer assim você já vai entender por exemplo aqui a gente tem no CSS convencional a nossa tag reader o seletor reader e a gente tem aqui Um seledor um seletor mais específico que é Rider Button certo então tô dizendo que dentro do header eu quero pegar o botão quando a gente trabalha com SSS o super CSS a gente pode fazer isso dentro da nossa tag principal Então se o nosso seletor principal é o reader aqui dentro eu poderia colocar assim ó e aqui abriu o seletor e aqui dentro dizer que eu vou ter o background vamos fazer aqui ó uma outra cor ó fazer assim ó secundário certo secundário vai ser read e aqui eu coloco aqui c com dar dessa forma eu posso apagar esse daqui de baixo e eu tenho agrupado tudo que tem dentro do hider Então eu tenho o header Button E aí dá uma olhada lá ó funcionou nosso botão tá vermelho fundo verde né tá ficando muito bonito Inclusive essa nossa página meu Deus do céu Beleza então dessa forma você pode fazer o agrupamento aqui dentro de uma coisa só fica mais prático principalmente para você dar manutenção você pode ir colocando aqui por exemplo poderia colocar o parágrafo aqui eu poderia colocar o H1 certo então se eu fizer isso por exemplo vou colocar aqui parágrafo a cor vai ser Black e o nosso H1 a cor vai ser sei lá Beleza quando eu gerar que o meu arquivo você vai ver que lá no nosso CSS ele já vai fazer separadinho Rider Button riderple Rider H1 Ok só que aqui a gente deixou tudo alinhado numa coisa só tudo alinhado né tudo junto numa coisa só o que facilita para você poder ter uma sintaxe mais fácil de você ver no caso do botão especificamente a gente tem geralmente também que trabalhar com efeito de o mouse ficar sobre né ou talvez pseudo propriedades como é After before Então como é que você faz aqui no SSS você vai fazer o e Comercial dois pontos e aí você coloca o que você quer por exemplo aqui o over que que acontece quando o mouse ficar em cima né então quando eu coloco ele comercial tô falando que é uma extensão disso daqui da última coisa que eu tenho então eu posso colocar que quando o mouse estiver sobre o background dele vai ser Yellow por exemplo se eu salvar Quando eu for lá no meu projetinho ó lá cliquei E aí ficou Amarelo o reader eu errei aqui tem que ser dentro do nosso botão olha só tem que ser aqui dentro ó dentro da alinhamento do botão se eu coloquei fora ele vai achar que é do hider Então dentro aqui das chaves do nosso botão aí sim eu coloco o over E aí agora se a gente for lá agora sim funcionou Beleza então tem que tomar cuidado com essa questão dos chaveamentos aqui eu coloquei fora né aqui você também poderia usar o seu do elemento After por exemplo né E aqui colocar contente vamos dizer assim teste beleza seu salvar Olá aqui que vai acontecer é um botão qualquer teste Beleza então você pode também usar esses atributos aqui essas propriedades também no scss uma outra coisa muito legal do super CSS que é uma tremenda de uma mão na roda para mim é uma das principais um dos principais recursos aqui é o de importação Então a gente tem o nosso reader aqui por exemplo né daí Aqui para baixo a gente tem o nosso contato e tal a gente poderia ter aqui inúmeras Inúmeras coisas numa folha de estilo gigantesca aqui conforme mais ela cresce mais fica bizarro de você dar manutenção agora com o scss olha só o que que você pode fazer você pode criar aqui ó um arquivo que você pode fazer assim underline vou chamar sem underline reader ponto scss quando eu coloco o underline e o nome Eu tô criando aqui como se fosse um template só para aquele aquela propriedade específica que eu quero eu tô como que separando em pedaços menores o meu código CSS E aí olha que que eu vou fazer aqui dentro Eu vou pegar esse conteúdo do nosso reader aqui vou recortar e vou colocar lá dentro do nosso reader ponto SSS coloquei aqui dentro e salvei Se você olhar lá na nossa página não aconteceu nada as propriedades não não estão funcionando mas agora no nosso index.

s que a nossa principal olha só que que eu posso fazer arroba importe E aí eu posso importar aqui o nosso reader. css Então você faz assim ponto barra para indicar que é nessa mesma página pasta que a gente tá então sempre coloco o ponto barra para apontar que tá na mesma pasta e eu vou querer pegar aqui o reader. s CSS você vê que ele não coloca a extensão porque realmente não precisa que você pode colocar o ponto e vírgula se eu salvar agora olha só o que que vai acontecer tiaras aplicou ali o nosso CSS Então dessa forma a gente colocou aqui no nosso código CSS o reader só que ele foi importado olha só que legal então eu tenho os arquivos separados em grupos que eu posso deixar tudo separadinho para organizar melhor o meu arquivo CSS então eu poderia pegar essas minhas variáveis aqui recortar contra o X vou criar aqui um novo arquivo chamado variáveis e aqui dentro eu vou colar essas variáveis foi lá no mindex ponto scss eu vou importar ela aqui ó @import E aí Eu aponto aqui que eu quero nessa mesma pasta então ponto barra e eu quero pegar o variáveis meu Deus se a língua enrolou e aí beleza se eu for lá a gente vai ver que tá tudo funcionando numa Beleza então é esse recurso de importação aqui é fantástico para você separar o seu css1 arquivos menores e assim você tem um controle melhor de onde estão cada coisa quando você precisar show de bola né pessoal agora a gente vai ver um outro recurso muito interessante que são as mixing que é como se fosse uma função como a gente tem no caso do Java script todas as linguagem de programa só como se fosse uma função pronta que você pode estar usando aqui olha só que legal Vamos imaginar a gente tem aqui por exemplo o display Flex aí eu posso dizer que o justifique contente vai ser Center e o online itens vai ser Center também aqui no do reader.

é scss se a gente for dar uma olhada a gente vai ver que vai estar coisa mais linda do mundo esse nosso projeto dessa forma como tá aqui imagina que vários e vários dos nossos seletores do CSS vão precisar talvez ter o display flex com justify content Center e o online item Center por exemplo Então olha o que que a gente pode fazer a gente pode recortar isso daqui e a gente pode colocar aqui ó o chamado Mix Então você faz o arroba Mix que é exatamente como se fosse uma função e aqui a gente pode dar o nome que a gente quiser por exemplo a gente pode chamar aqui de Flex Center inclusive ele aceita parâmetros tá pessoal que você pode colocar aqui dentro exatamente como uma função no caso do Java script e aqui dentro a gente pode colocar essas propriedades por exemplo do display Flex a gente faz contente Center e o online e como sendo Center beleza aqui no nosso reader agora olha só o que que a gente faz você faz o arroba include E aí você diz o que que você quer incluir eu quero incluir o nosso Flex Center olha só que simples fazendo isso a gente já vai ver que ele vai funcionar aqui beleza se eu colocar inclusive aqui ó vou colocar uma altura de 100 VH VH aqui só para a gente ver a mudança lá show de bola pessoal ficou bem legal isso aqui você deixa eu trocar essas cores que estão bem bizarras aqui nas nossas variáveis né Deixa eu colocar uma cor aqui menos agressiva para os olhos e colocar um azul clarinho aqui né acho que eu vou colocar um cinza claro ainda para ficar mais tranquilo da gente dar uma olhada Beleza então olha só que legal pessoal a gente colocou aqui então a gente fez como se fosse uma função e aqui a gente colocou a roupa include para dizer que a gente quer rodar aquela função naquela parte ali tá porque se a gente for lá no nosso arquivo CSS a gente vai ver que ele vai ter colocado aqui o display a altura e tal agora olha só o que que é interessante quando você trabalha com essas funções com Mix Você pode passar parâmetros dentro da função então eu poderia fazer o seguinte eu poderia ir lá vamos fazer a nossa mais um excesso vou fazer aqui ó contato SSS que vai ser a nossa dívida de contato então vou fazer a classe contato aqui e aqui eu também vou fazer o arroba include e aqui eu vou incluir o nosso não pera aí Isso aqui vai dar problema não vou fazer assim não pera aí deixa eu fechar deixa eu deletar isso aqui Esquece isso aqui que eu tava fazendo vamos lá no nosso index.