Instalação (Install Globally Using NPM)
- Tenha o NodeJS & NPM instalado.
-
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
.
Exemplo 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 pro CSS. Se quiser parar o comando, dá um Ctrl + C
.
3 - --no-source-map
é pra evitar de criar um map. Você pode remover ele se quiser e testar.
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ê:
Espero que eu possa ter ajudado. <o/