SASS com Vite: otimizando e modularizando seu CSS

Conhecendo o SASS e o Vite - Apresentação

Boas-vindas a este curso sobre Sass, um pré-processador CSS.

Apresentação

Olá, eu sou a Nayanne Batista e acompanharei vocês ao longo deste curso.

Audiodescrição: Nayanne é uma mulher com pele morena, olhos e cabelos castanhos escuros, e está usando uma camisa cor de laranja.

Sobre o curso

O Sass é uma ferramenta interessante, porque é um CSS com superpoderes. Para aprender sobre os recursos avançados que o Sass oferece, utilizaremos o projeto Serenatto Café, que é uma landing page de uma cafeteria que oferece diversos serviços e produtos.

Para estilizar este projeto, aprenderemos sobre recursos que o CSS não oferece de forma nativa, como:

• herança
• mixins
• funções

Além disso, para servir o projeto localmente como ferramenta de build, utilizaremos o Vite, que tornará a compilação do Sass em CSS muito mais eficiente e automática, já que é o CSS que o navegador entende.

O que é necessário para fazer este curso? É importante ter uma boa base sobre CSS, entender sobre as propriedades, display flex, grid e responsividade, para aproveitar melhor o curso.

Estou empolgada para começar, então pegue seu café e venha nos acompanhar!

Conhecendo o SASS e o Vite - Criando o projeto com o Vite

Vamos conhecer o desafio que desenvolveremos ao longo deste curso? No Figma, vamos abrir o projeto do Serenatto Café.

O projeto no Figma

Trata-se de uma landing page de uma cafeteria que oferece diversos serviços e produtos. Essa aplicação é bastante robusta, com recursos como o modo noturno, por exemplo. Além da versão noturna, também temos a versão para dispositivos móveis, o que nos responsabiliza pela implementação da responsividade.

Pré-processador CSS

Para estilizar este projeto, utilizaremos um pré-processador CSS. Nossa escolha será o Sass. Então, primeiramente, vamos acessar a documentação do Sass.

Sass é a abreviatura para Syntactically Awesome Style Sheets, ou seja, folhas de estilo sintaticamente incríveis. Segundo a documentação, essa ferramenta se intitula um "CSS com superpoderes".

Precisamos utilizar o Sass, porém o navegador entende apenas CSS, então será necessário compilar o Sass em CSS. Para isso, utilizaremos uma ferramenta moderna e rápida que servirá nosso projeto localmente e fará a compilação instantânea: o Vite.

Falaremos mais sobre o Sass e como instalá-lo no próximo vídeo. Agora, vamos explorar o Vite.

Vite

O Vite será a ferramenta que utilizaremos para construir nosso projeto e compilar o Sass para CSS. Vamos acessar a documentação do Vite.

Para começar nosso projeto, precisamos instalar essa ferramenta. Vamos clicar no botão "Get Started" e descer a página até a seção "Scaffolding Your First Vite Project", onde encontraremos o comando para criar um novo projeto com a última versão do Vite:

npm create vite@latest

Em nosso computador, criaremos uma pasta chamada "Serenatto". Com ela aberta no Explorador de Arquivos, vamos digitar cmd na barra superior e pressionar "Enter" para abrir um terminal. Assim, o terminal é aberto já no caminho específico da pasta do projeto.

Ao usar o comando copiado da documentação do Vite, o terminal solicitará um nome para o projeto, então vamos inserir o nome "serenatto-cafe" e pressionar "Enter" novamente.

Em seguida, é preciso selecionar um framework. Usando as setas do teclado, podemos escolher entre várias opções, como:

• Vanilla
• Vue
• React
• Svelte
• entre outros

O Vite é uma ferramenta que serve para criar templates em diversos frameworks. No nosso caso, criaremos um projeto com JavaScript puro, então selecionaremos Vanilla.

Depois, devemos selecionar a variante, pois o Vite suporta JavaScript e TypeScript. Utilizaremos JavaScript para lidar com os modais e a responsividade.

Assim, o projeto foi criado e o terminal mostrará três novos comandos que precisamos executar. Primeiramente, entraremos na pasta do projeto com o seguinte comando:

cd serenatto-cafe

Uma vez dentro do projeto, vamos baixar todas as dependências necessárias, que ficarão listadas no arquivo package.json. Executaremos o seguinte comando:

npm install

Após a instalação, podemos visualizar o projeto no VS Code. Basta executar o seguinte comando:

code .

Após pressionar a tecla "Enter", o VS Code será aberto e podemos observar a estrutura do projeto no menu Explorer à esquerda. Essa estrutura inclui:

• pastas como "node_modules" e "public"
• arquivos como counter.js, index.html, main.js, package.json e package-lock.json
• um arquivo de estilos, style.css

Na linha 11 do arquivo index.html, notamos que ele já importa o script main.js, que por sua vez importa a folha de estilo na linha 1. É no arquivo style.css que começaremos a trabalhar quando instalarmos o Sass no próximo vídeo.

Organizando o projeto

Para executar o projeto, vamos abrir o terminal do VS Code com "Ctrl + J', selecionar uma aba do Git Bash e executar o comando:

npm run dev

O projeto é servido no localhost na porta 5173. Podemos clicar no link disponibilizado no terminal para abrir o projeto no navegador, que exibe um "Hello Vite" com o símbolo do Vite e do JavaScript, além de um contador que incrementa quando clicamos nele.

Antes de começar a codificar nosso projeto, vamos apagar algumas partes que não precisaremos. No VS Code, no menu Explorer à esquerda, podemos excluir a pasta "public" e os arquivos counter.js e javacript.svg.

No main.js, vamos manter apenas a primeira linha, que corresponde à importação da folha de estilos. O restante pode ser apagado. No arquivo style.css, podemos apagar tudo.

Desse modo, ficamos com uma estrutura mais básica para nosso projeto. Agora, se executarmos o projeto, temos apenas uma página em branco.

Com o Vite instalado, já conseguimos criar nosso projeto. O Vite é uma ferramenta de build e servidor de desenvolvimento que otimiza a criação do projeto, oferecendo compilação instantânea do CSS de pré-processadores como o Sass.

Ele utiliza o poder dos módulos do ECMAScript para realizar essa compilação de forma automática, tornando o desenvolvimento mais eficiente.

O próximo passo é integrar o Vite com o Sass, o pré-processador que utilizaremos. Descobriremos como fazer isso no próximo vídeo.

Conhecendo o SASS e o Vite - Instalando o SASS

Agora que criamos o projeto com Vite e apagamos alguns arquivos desnecessários para nossa landing page, temos apenas uma página em branco quando executamos o projeto. Que tal começarmos a mudar isso?

Estrutura HTML e assets

O foco deste curso é a parte da estilização, então disponibilizaremos uma estrutura HTML já pronta, na atividade "Preparando o Ambiente". Basta você abrir o arquivo index.html do projeto e substituir o conteúdo. Note que continuamos importando o script main.js, na linha 262.

Além disso, também disponibilizaremos uma pasta como todos os assets do projeto, ou seja, as imagens e os ícones. Não se esqueça de colocar essa pasta no projeto também, pois ela contém todos os produtos e serviços do Serenatto Café.

Agora, se voltarmos ao navegador e recarregarmos, veremos uma estrutura ainda um pouco distante daquela que está no Figma, mas já temos o nosso HTML com links, imagens, produtos e o formulário.

Nosso desafio agora é começar a estilizar essa página.

Instalando o Sass

O projeto Serenatto possui muitos estilos e, para organizá-los de forma que não fique um CSS gigante e repetitivo, é importante utilizarmos uma ferramenta que nos auxilie. Essa ferramenta será um pré-processador CSS chamado Sass. Ele é comumente chamado de "CSS com superpoderes", e logo vamos descobrir por quê.

O primeiro passo é instalar a ferramenta no computador, então vamos acessar a documentação do Sass.

Na barra superior do site, clicaremos em "Install". Descendo a página até a seção "Install Anywhere (npm)", temos instruções de como realizar a instalação com o NPM, que é um gerenciador de pacotes.

Contudo, para utilizar o NPM, precisamos ter o Node instalado. Como sabemos se temos o Node instalado? No VS Code, basta abrir o terminal e executar o comando:

node -v

No nosso caso, temos o Node instalado na versão 20.12.2. Caso você receba alguma mensagem de erro ou dizendo que este não é um comando reconhecido, isso quer dizer que o Node não está instalado no seu computador.

O passo a passo para fazer essa instalação está na atividade "Preparando o Ambiente", mas basicamente é preciso acessar a documentação do Node e clicar em "Download" ou "Descarregar", dependendo do idioma. Depois de feito o download, basta seguir os passos para fazer a instalação e, então, será possível utilizar o NPM.

Com o Node instalado, vamos voltar à documentação do Sass e copiar o comando de instalação com o NPM. A flag -g significa que a instalação será realizada de forma global:

npm install -g sass

No terminal do VS Code, vamos colar o comando e pressionar "Enter" e a ferramenta será baixada rapidamente.

Para verificar a versão, podemos digitar:

sass --version

Nossa versão é 1.79.1.

Agora, já temos tanto o Vite quanto o Sass. Vamos descobrir como fazer a integração dessas ferramentas.

O SASS, como mencionado, é um pré-processador CSS que nos auxilia porque estende todas as funcionalidades do CSS, adicionando vários recursos e funcionalidades avançadas que o CSS não traz de forma nativa.

Ele nos ajudará muito a modularizar nosso código, reutilizar trechos de código e deixar os estilos mais organizados de forma eficiente, facilitando a manutenção e o próprio desenvolvimento.

No próximo vídeo, começaremos a entender mais sobre a sintaxe do SASS. Nos vemos lá.

Sobre o curso SASS com Vite: otimizando e modularizando seu CSS

O curso SASS com Vite: otimizando e modularizando seu CSS possui 113 minutos de vídeos, em um total de 53 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Conhecendo o SASS e o Vite
• Trabalhando com partials e mixins no SASS
• Utilizando @extend no Sass
• Utilizando funções no Sass
• Trabalhando com responsividade no Sass