Aprendendo Node-sass O Guia Completo para Compilar e Otimizar seu CSS

Com Node-sass podemos facilmente compilar os arquivos e transformá-los em CSS minificado para uma melhor otimização do site.

Publicado em 07/08/2023 08:58

Node-Sass é um pacote NPM que nos permite compilar nossos arquivos SASS ou SCSS para uma versão final em CSS puro. Também podemos habilitar o modo de escuta (watch) e comprimir o resultado final para um arquivo minificado, possibilitando gerar um arquivo menor e com uma melhor performance.

Sass e SCSS são pré-processadores CSS que estendem a sintaxe do CSS padrão, permitindo que os desenvolvedores escrevam estilos de forma mais eficiente e organizada. Ambos oferecem recursos avançados, como variáveis, mixins e aninhamento de regras, que ajudam a reduzir a repetição de código e facilitam a manutenção. Sass tem uma sintaxe mais compacta e elegante, enquanto SCSS mantém a compatibilidade com a sintaxe CSS tradicional, tornando-o uma escolha popular para transições graduais. Ambos são amplamente usados na comunidade de desenvolvimento front-end.

Instalando o Node-sass

Vamos partir do ponto que você já tenha o Node e o NPM instalado em seu computador, caso não tenha, a gente escreveu um artigo com os primeiros passos em Node.

Primeiramente inicialize o NPM caso já não tenha feito.

npm init -y

Agora vamos instalar o Node-sass.

npm install node-sass

Estrutura de diretórios SCSS

Para essa aula vamos utilizar o SCSS ao invés do SASS, ambos são muito parecidos. Vamos manter a estrutura de diretórios abaixo

- /app
---- /src
---- /dist

A pasta /src vai conter nossos arquivos em scss enquanto a /dist, vai conter o arquivo final CSS.

Criando os arquivos scss

Primeiramente vamos criar um arquivo de configuração, ele não será compilado mas pode ser importado. Vamos dar a ele o nome de _config.scss, é muito importante manter o underline no início.

$color : rgb(42, 42, 119)

Agora vamos criar um novo arquivo, vamos atribuir a ele o nome de script.scss. Note no código abaixo que estamos chamando nosso arquivo de configuração.

@import "config";

body {
    background-color: $color;
    color:#fff;
}

Compilando o SCSS para CSS

Abra o terminal e rode o comando abaixo. Note que estamos informando o caminho do arquivo SCSS e depois o caminho para o CSS final.

npx node-sass app/src/script.scss app/dist/style.css

Criando script NPM para compilar o SCSS

Ficar rodando o comando anterior pode ser bastante desgastante e nada produtivo, por tanto, abra o arquivo package.json e insira a entrada abaixo na seção de scripts.

"scripts": {
    "sass" : "npx node-sass app/src/script.scss app/dist/style.css"
  },

Agora no terminal basta rodar o comando npm run sass para fazer a compilação.

Ouvindo as mudanças do SCSS

Podemos usar a instrução --watch para que quando houver alguma mudança no arquivo SCSS, automaticamente a compilação ocorra. Vamos criar um novo script no arquivo package.json, veja como fica.

"sass-watch": "node-sass --watch app/src/script.scss app/dist/style.css"

Agora basta rodar o comando npm run sass-watch.

Comprimindo o CSS final

Até aqui o arquivo CSS gerado não está minificado, ou seja, está muito bem estruturado. Para fazer a minificação, podemos incluir a flag --output-style compressed. Note que definimos o nome do arquivo final para .min.css apenas por convenção.

"scripts": {
    "sass": "node-sass --output-style compressed app/src/script.scss app/dist/style.min.css",
    "sass-watch": "node-sass --output-style compressed --watch app/src/script.scss app/dist/style.min.css"
  },