Como compilar Sass em 2022
Tags: css, scss, webdev, parcel
Published: 2022-09-13 21:36:34

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.

<br/>

---------------

<br/>

## 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](https://dev.to/lixeletto/vite-js-o-build-tool-que-vai-facilitar-a-sua-vida-15ho) **ou** [na documentação oficial](https://vitejs.dev/) (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`
```bash
touch index.html style.scss
```

2 - No terminal (dessa vez tem que ser no terminal mesmo), instale `sass`
```bash
npm install -D sass
```

3 - No seu `index.html` insira um link direto pra seu `style.scss` (isso mesmo!)
```html
<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`
```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ó.


<br/>

---------------

<br/>

## 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](https://www.brianhan.co/2018-12-18-parcel-sass/), 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:
```bash
npm install parcel-bundler sass -D
```

2 - A seguir adicione o link do seu documento `.scss` direto no html:
```html
<link type="text/css" href="style.scss" />
```

3 - Por fim, configure seu package.json (ou rode os scripts diretamente no terminal com [npx](https://blog.rocketseat.com.br/conhecendo-o-npx-executor-de-pacote-do-npm/#:~:text=NPX%20%C3%A9%20um%20package%20runner,npx%20como%20veremos%20a%20seguir.):
```json
{
  "scripts": {
    "dev": "parcel ./index.html",
    "build": "parcel build ./index.html"
  }
}
```

<br/>

---------------

<br/>

## 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`](https://www.npmjs.com/package/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](https://babeljs.io/).

> 💡 Para entender melhor como funciona, sugiro [a documentação oficial do sass-loader](https://webpack.js.org/loaders/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](https://astro.build/)
- [Vue](https://vuejs.org/)
- [React](https://beta.reactjs.org/) - preferi indicar a documentação na sua versão beta pois eu particularmente acho ela mais compreensível.
- [Nuxt](https://nuxtjs.org/)
- [Next](https://nextjs.org/)
- [Svelte](https://svelte.dev/blog/the-easiest-way-to-get-started)

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.

<br/>

---------------

<br/>

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2tdqz2zqhc4afc68t1c.png)

<br/>

---------------

<br/>

## 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](https://twitter.com/lixeletto) no Twitter. Mas assim, eu não fico postando tutorial lá, eu só uso a rede compulsivamente mesmo.