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

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

npm install -D sass

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

<link type="text/css" href="style.scss" />

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

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"
  }
}

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

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

<link type="text/css" href="style.scss" />

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"
  }
}

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

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.