Fabrizio Feitosa

Fabrizio Feitosa

Exploro o universo do desenvolvimento com artigos, tutoriais e reflexões sobre tecnologia — compartilhando aprendizados reais e dicas práticas do dia a dia.

Voltar

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. Execute 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, deixe 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 aparecer a opção. No Windows, segure 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 para você.

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

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

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

2 - O -w para ele ficar "observando" 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 é para 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 para você:

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