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,.cssou.htmlsem problema algum. Libs como React utilizam o webpack para, entre outras coisas, interpretar arquivos com a extensão.jsxusando 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.
Top comments (0)