Acompanhe e Compile Sass em Cinco Passos Rápidos

Talvez Sass seja o pré-processador mais popular. Por anos, ajudou-nos a escrever CSS modular, reutilizável e limpo. Nesse tutorial rápido, iremos direto ao que interessa e explicaremos como compilar Sass em CSS usando a linha de comando.

1. Instalar Node.js

Para compilar o Sass via linha de comando, primeiro precisamos instalar o Node.js. Baixemos do site oficial, nodejs.org, abramos o pacote e sigamos o passo-a-passo.

2. Iniciar NPM

NPM é o administrador de pacotes do JavaScript. NPM facilita a instalação e remoção de pacotes de terceiros. Para iniciar um projeto Sass com NPM, abramos o terminal e naveguemos até a pasta do projeto.

Estando na pasta certa, execute npm init. Teremos de responder algumas perguntas sobre o projeto as quais o NPM usará para criar o package.json na pasta.

3. Instalar Node-Sass

Node-sass é um pacote do NPM que compila Sass em CSS (bem rápido). Para instalá-lo, executemos o comando a seguir no terminal: npm install node-sass.

4. Criar o Comando Node-Sass

Tudo está pronto para escrevermos um pequeno script para compilarmos com Sass. Abramos o package.json em um editor de código. Veremos algo assim:

1

{

2

  "name": "sass-tutorial",

3

  "version": "1.0.0",

4

  "description": "",

5

  "main": "index.js",

6

  "scripts": {

7

    "test": "echo \"Error: no test specified\" && exit 1"

8

  },

9

  "author": "",

10

  "license": "ISC"

11

}

Na seção scripts, adicionemos o comando scss, abaixo do comando test, assim:

1

"scripts": {

2

  "test": "echo \"Error: no test specified\" && exit 1",

3

  "scss": "node-sass -watch scss -o css"

4

}

Vejamos, palavra por palavra.

1. node-sass: refere-se ao pacote node-sass.
2. -watch: semáforo opicional que significa "acompanhe todos arquivos .scss na pasta scss/ e recompile-os sempre que algo mudar".
3. scss: noma da pasta onde ficam todos arquivos .scss.
4. -o css: a pasta de destino do CSS compilado.

Ao executarmos o script, ele acompanhará cada arquivo .scss na pasta scss/ e salvará o css compilado na pasta css/ sempre que algum arquivo .scss mudar.

5. Executar o Script

Para executar nosso script, executaremos o comando npm run scss no terminal.

E voilà! Estamos acompanhando e compilando SASS.

Dicas Rápidas de Sass

Fique ligado para mais dicas de Sass. Há uma coleção inteira a caminho!