TidBits

SASS / SCSS é uma plataforma pra desenvolver CSS de forma mais proveitosa e produtiva, podendo dividir em vários arquivos .scss e formando um único .css, possibilitando várias pessoas trabalharem no mesmo CSS de um projeto.

Assim como existem diversas linguagens de servidor pra no final geral HTML (como PHP / JAVA / Ruby / ASP, etc), é completamente normal que comecem a aparecer linguagens pra gerar css e javascript.

E SASS gera CSS, Coffee Script gera Javascript… e por aí vai.

E quais são as vantagens de usar SASS:

É possível dar includes, criar funções, variáveis, expressões matemáticas. E como a linguagem é interpretada, erradifica qualquer tipo de bug / erro de digitação do CSS.

Veja alguns prints de um arquivo sass / scss.

Funções (Mixins) com Sass

Expresões matemáticas com Sass

Variáveis, includes e mixins com Sass

O que precisa pra trabalhar com SASS?

Primeiro, precisa baixar e instalar Ruby.

Pra quem não tem, baixe aqui e depois configure a entrada do Ruby nas suas variáveis de ambientes.
É meio chatinho isso pra quem usa windows, precisa clicar do direito no “Meu Computador” e ir em propriedades, depois são 6 passos:

1. > Advanced System Settings
2. > Advanced
3. > Environment Variables
4. > Na caixa System variables clicar em Path
5. > Clicar em Edit e vai abir uma nova janela com a entrada.
6. > Agora é só adicionar e dar ok. Precisa adicionar a pasta “bin” do Ruby, provavelmente vai ser C:\Ruby192\bin; (não esqueça do ; )

Pronto, Ruby instalado, aí precisa baixar a gem do sass:

entre no DOS ( windows + R e digite cmd ) entre na pasta do Ruby e digite

gem install sass

Vai demorar uma carinha pra baixar / instalar.

Mas é isso.

Depois, no seu projeto, crie uma pasta sass e uma css na raiz.

E ainda no DOS entre no projeto e execute o comando

sass --watch sass:css

Isso fará com quem cada vez que ouver alguma alteração na pasta sass, republique o css

Existe várias formas de gerar o css como compactado, compresso, normal, eu gosto de executar assim:

sass --watch sass:css --style compact --no-cache

Pra quem quiser, deixei uma pasta pronta com um base project de sass com reset, alguns mixins (como são chamadas as funções em sass) e com um .bat que inicia sozinho o watch pra escrever o css em tempo real.