Desenvolvendo CSS de forma mais produtiva usando SASS
Posted on August 11, 2011 by Danilo
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:
> Na caixa System variables clicar em Path
> Clicar em Edit e vai abir uma nova janela com a entrada.
> 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
Vai demorar uma carinha pra baixar / instalar.
Depois, no seu projeto, crie uma pasta sass e uma css na raiz.
E ainda no DOS entre no projeto e execute o comando
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.