DEV Community 👩‍💻👨‍💻

Cover image for Como compilar Sass em 2022
Camilo Micheletto
Camilo Micheletto

Posted on

Como compilar Sass em 2022

Ainda hoje vejo muitas pessoas usando Live Sass Compiler (que ainda não dá suporte a versões mais recentes do Sass), Gulp, linha de comando e até aplicações externas como Scout-app. Pra quem quer aprender Sass isso pode ser uma curva de aprendizagem muito íngreme pra aprender ferramentas que você raramente vai usar no local de trabalho.

Nesse post apresento 3 alternativas pra você compilar Sass na sua máquina de forma fácil, pra que você possa focar em aprender a linguagem.


Vite.js

O Vite (se pronuncia vite e não vaite, se você se importa) é uma ferramenta de front-end que possui de forma pré-configurada um compilador que de inicio vai ser um servidor ao vivo rapidíssimo pra pra sua aplicação, mas vai também compilar uma série de libs, frameworks e processadores como o Sass com quase nenhum trabalho.

💡 Se quiser aprender mais sobre Vite dá uma olhada nesse post que escrevi há um tempo atrás ou na documentação oficial (que está bem mais atualizada).

Pra iniciar a sua aplicação rodando em Sass, siga os passos a seguir.

1 - No terminal ou diretamente na pasta / IDE crie os arquivos index.html e style.scss

touch index.html style.scss
Enter fullscreen mode Exit fullscreen mode

2 - No terminal (dessa vez tem que ser no terminal mesmo), instale sass

npm install -D sass
Enter fullscreen mode Exit fullscreen mode

3 - No seu index.html insira um link direto pra seu style.scss (isso mesmo!)

<link type="text/css" href="style.scss" />
Enter fullscreen mode Exit fullscreen mode

4 - Por fim rode o código no navegador usando o Live Server do Vite.js, o resto do trabalho ele vai fazer pra você. Pra isso existem duas formas, a mais simples é diretamente pelo terminal:

npx vite
Enter fullscreen mode Exit fullscreen mode

Esse comando vai acionar o servidor ao vivo que vai servir seu site bunitinho em um endereço local (http://localhost:0000)

Ou você pode criar um comando pra isso no package.json.
Primeiro instale o Vite localmente com npm install vite

A seguir, adicione o script "dev" no seu package.json

{
  "scripts": {
   "dev": "npm run vite"
  }
}
Enter fullscreen mode Exit fullscreen mode

Dessa forma você pode acionar diversos scripts que o Vite oferece além do servidor de desenvolvimento, documentando-os em um lugar só.


Parcel

O parcel é uma ferramenta de build, ou seja, que cuida de servir sua aplicação na web e transformar e melhorar a performance de HTML, CSS, JS e outras extensões, libs, plugins e frameworks que você deseje plugar.

💡 Aprendi a usar essa ferramenta nesse tutorial do Brian Han, em inglês, fiz basicamente uma transcrição simplificada do mesmo.

O passo-a-passo do Parcel é bem parecido com o do Vite:

1 - Depois de criar seus documentos index.html e style.scss na pasta do seu projeto, instale o Parcel e o Sass como dependências de desenvolvimento:

npm install parcel-bundler sass -D
Enter fullscreen mode Exit fullscreen mode

2 - A seguir adicione o link do seu documento .scss direto no html:

<link type="text/css" href="style.scss" />
Enter fullscreen mode Exit fullscreen mode

3 - Por fim, configure seu package.json (ou rode os scripts diretamente no terminal com npx:

{
  "scripts": {
    "dev": "parcel ./index.html",
    "build": "parcel build ./index.html"
  }
}
Enter fullscreen mode Exit fullscreen mode

Outras formas

Em ordem de complexidade, podemos rodar aplicações com sass das seguintes formas:

  • Usando Rollup Rollup é um build tool (vite usa ele debaixo dos panos, inclusive), sua configuração lembra do Webpack (outro build tool), só que com menos complexidade, na minha opinião. Rollup é um pouco mais complicado pois você precisa configurar qual será o ponto de entrada dos arquivos .scss/.sass, tal como especificar o plugin correto.

Mais detalhes no plugin rollup-plugin-scss, recomendo a versão 3 com sass e não node-sass, visto que é a versão mais
moderna do compilador.

  • Usando Webpack Webpack é um bundler de Javascript, isso significa que à partir do seu documento principal de JS (index.js, por exemplo), ele vai construir um gráfico de qual arquivo depende de qual pra carregar, e transformar/alterar arquivos no caminho quando necessário. Dessa forma você pode depender de arquivos que não são .js, .css ou .html sem problema algum. Libs como React utilizam o webpack para, entre outras coisas, interpretar arquivos com a extensão .jsx usando o babel.

💡 Para entender melhor como funciona, sugiro a documentação oficial do sass-loader (não é tão fácil de ler ela, mas me ajudou).

  • Frameoworks e libs de javascript Quase todos frameworks e libs de javascript que eu conheço possuem uma forma simplificada de processar arquivos .scss (entre muitos outros!).

Dentre esses, posso citar:

  • Astro
  • Vue
  • React - preferi indicar a documentação na sua versão beta pois eu particularmente acho ela mais compreensível.
  • Nuxt
  • Next
  • Svelte

Mas a lista é muito maior! Nesses frameworks, a maioria você vai instalar o sass como dependência (npm install sass, lembra?) e na maioria deles apenas importar as folhas de estilo pra suas páginas e componentes.


Menção honrosa

Se você quiser apenas experimentar coisas com Sass sem o compromisso de construir uma aplicação, você pode usar o codepen!

Digite no navegador https://pen.new que abrirá um novo playground de HTML, CSS e JS.

Na engrenagenzinha (painel de configuração) do CSS, escolha no select com o nome de "CSS Processors" a opção SCSS ou Sass

Na página de um novo projeto de codepen, nas configurações de CSS, o elemento de select com o nome CSS Processors está expandido, com um hover na opção de SCSS


Considerações finais

Ainda existem outras formas que não foram exploradas nesse post, sintam-se livres pra discutir, sugerir ou me corrigir sobre algo que escrevi, vou adorar o carinho!

Eu particularmente gosto de Sass pois sua curva de aprendizagem é menor do que fazem parecer, sabe?

Se você cria um arquivo .scss, você pode começar escrevendo CSS puro nele e ir incrementando com funcionalidades que o Sass te traz conforme for aprendendo.

🤝 Se quiser me perguntar algo, contribuir mais de perto ou só papear, eu sou o @lixeletto no Twitter. Mas assim, eu não fico postando tutorial lá, eu só uso a rede compulsivamente mesmo.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.