Compilar SASS / SCSS a partir da linha de comando

Compile de forma simples, e em qualquer diretório, SASS e/ou SCSS para CSS usando NodeJS de forma global.

Instalação (Install Globally Using NPM)

1. Tenha o NodeJS & NPM instalado.
2. Rode o comando para instalar o SASS globalmente:

npm install -g sass

Nota: O comando anterior pode precisar ser prefixado com, sudo dependendo de suas permissões de usuário no caso de um LINUX.

One-to-One Mode

O uso mais básico do aplicativo seria chamar o comando sass e fornecer seu arquivo de origem e o caminho de destino:

sass origem.scss saida.css

O nome "origem" você precisa escrever o mesmo nome do arquivo SASS que você criou, mas o de "saida" você pode dar o nome que quiser. Mas lembre de colocar as extensões de cada arquivo!

ou mais de um arquivo:

sass style.scss:style.css buttons.scss:buttons.css

Perceba que na linha tem o nome do arquivo SASS e separado por dois pontos ":" vem o nome do que deve ser transformado, ou seja, o arquivo CSS.

ou pasta para pasta:

sass assets/scss:assets/css

SASS to CSS na prática!

Recomendo ter uma boa organização, onde o SASS fique dentro de uma pasta separada do CSS, mas caso vá usar como componentes deixa os dois um do lado do outro e use o método One-to-one que falei acima.

Vamos imaginar o seguinte:

• Você tem uma pasta com nome css;
• Dentro dela crie uma pasta chamada sass e coloque seus arquivos;
• Agora volte na pasta css e vamos usar o prompt de comando nela;

Dependendo do seu sistema operacional, é só clicar com mouse direito na pasta que deve aparece a opção. No Windows, segura o Shift + clique com o direito.

Aqui está um exemplo de caminho no prompt:

seu-projeto/css

Então você pode executar esse comando:

 sass -w --no-source-map sass:

MAS O QUE FOI ISSO? Calma, vou explicar e até tentar desenhar pra você.

 sass -w --no-source-map sass:
|----|--|---------------|------|
__1___2________3__________4____

(acho que dá pra entender meu desenho aí acima)

1 - O sass é pra iniciar a atividade que queremos (lógico né?).

2 - O -w pra ele ficar "observado" sempre que você der um Ctrl + S no arquivo SASS e já converter para o CSS. Se quiser parar o comando, dá um Ctrl + C.

3 - --no-source-map é pra evitar de criar um map. Você pode remover enquanto está desenvolvendo para ajudar a depurar, mas quando for para produção, é bom deixar.

4 - Por fim, esse comando é origem:destino. Do jeito que está ele vai acessar a pasta sass e salvar o .css na pasta onde está rodando o comando, pois o segundo valor está vazio. Se tiver um valor nesse segundo, ele vai querer entrar na pasta de mesmo nome e salvar o CSS dentro.

Ficou com dúvidas ainda?! Vou passar aqui uns links úteis pra você:

• Documentação compilador SASS
• Fonte desse tutorial

Espero que eu possa ter ajudado. Até a próxima! 🚀