Quando eu estava (estou) aprendendo SASS pt3 FINAL

Para finalizar meu aprendizado com SASS só resta uma coisa. Como eu instalei e comecei a usar.

Durante a instalação do SASS tive que fazer uma escolha. Uma escolha bem simples na verdade, mas que muda a forma de praticar com esse pré-processador. Que tipo de linguagem irei usar? SASS real ou SCSS? Pra mim a opção foi fácil, SCSS. 

Qual a diferença entre as duas? Bom SCSS é a mesma coisa que css só que com as novidades do SASS (todos os exemplos que eu dei estão em .scss, acho que deveria ter dito antes). Já no SASS a linguagem muda. 

Mudanças gerais no SASS. Não é necessário mais chave {} e nem ponto e vírgula ; Tudo é feito através de identação (acho isso super esquisito, porém quando pega o jeito até que pode ser prático). Também as próprias funções mudam a forma de escrever, como por exemplo os mixins, ao invés de ser @include .classe é +.classe. Pretty neat.
Eu fico com o bom e velho .scss porque meu cérebro iria bugar muito sério se eu mudasse a forma de escrever, principalmente porque nem todos os meus projetos utilizam SASS atualmente. 

E agora para meus testes iniciais 

Bom, eu uso windows 10, e para que o SASS funcione no meu PC tive que baixar o ruby aqui. Depois de instalado, fui para o prompt de comando com ruby e coloquei o comando que o SASS manda para instalação. 

gem install sass

Verifiquei usando sass -v no prompt de comando e deu certo! Já tenho SASS no meu pc, simples assim. Agora como usá-lo. Crio a pasta com o meu site, geralmente a estutura é essa:

• Meu site
• index.html
• [assets] - pasta
• [css]
• [imagens]
• [javascript]
• [sass]

Tem mais de uma forma de se utilizar SASS, vou mostrar primeiro qual a que eu uso cotidianamente e depois exemplifico outras. A que eu achei mais prática foi ir no prompt de comando com ruby, ir até a pasta assets do meu site pelo prompt e depois dar o comando para o SASS monitorar minha pasta e buildar o css automaticamente na pasta css.

1. abrir prompt de comando com ruby
2. digitar:   cd [endereço da pasta assets]. Ex: cd www/meusite/assets
3. Dar o comando. sass --watch sass:css 

Com esse comando o sass fica vigiando (transformando o sass em css automaticamente) a pasta sass e mandando o css para a pasta css. Note que depois de --watch o primeiro nome é o nome da pasta que está os arquivos .scss ou .sass e o segundo nome é o nome da pasta que o css vai. Não é obrigatório essa separação, mas deixa bem mais organizado. E os nomes das pastas não precisam ser sass e css, mas elas tem que ser criadas antes de ser dado o comando.

Outro jeito de usar é baixar um plugin no seu editor de código que faça isso pra você. Não sei quais editores tem esse tipo de plugin, mas o sublime text (que é o que eu uso e é muito bom) (outro bom é o brackets) tem dois plugins do tipo. Um que faz o build do código ao apertar ctl+b (transformar de .sass pra .css) e um que automatiza isso, toda vez que você salva ele builda automaticamente. A desvantagem de buildar automaticamente é que você não escolhe a pasta que o CSS puro vai, fica sempre na mesma pasta que o arquivo sass está, o que deixa bem mais desorganizado. Por isso eu uso o prompt de comando. 

Outra opção (essa bem mais casual e até descomplicada) são os programas, só baixar um programa de pré-processamento dessa lista, dizer a pasta e clicar no botão de começar (dependendo do programa) que ele builda automaticamente também. 

E assim acaba a saga do SASS. Na realidade tudo escrito aqui tem no próprio site deles, na internet, em vídeos por aí. Mas não fui eu que escrevi, então fica minha marca no mundo agora. Que fique registrado quando eu comecei a usar essa bagaça e que talvez tenha ajudado alguém ao longo do caminho. 

Abraços, Matheus Beltrão