Desenvolvendo CSS de forma mais produtiva usando SASS

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.

Style with attitude

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

Funções com Sass

Expresões matemáticas com Sass

Expresões matemáticas com Sass

Variáveis, includes e mixins 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 ; )

Fluxo de cadastro de entrada nova nas variáveis de ambiente

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.

This entry was posted in CSS by Danilo. Bookmark the permalink.

About Danilo

Danilo é desenvolvedor front end e back end. Gosta de tênis, de acompanhar o Corinthians e de jogar futebol de videogame (no futebol de verdade ele é muito ruim).

5 thoughts on “Desenvolvendo CSS de forma mais produtiva usando SASS

  1. Pingback: Preprocessadores de CSS

  2. Pingback: Dica para CSS (Usando SASS ou LESS)

  3. Obrigado pelo tutorial, ele me ajudou bastante (ainda mais o arquivo que você disponibilizou). Com ele, consegui aprender bem a utilizar o SASS.

    Continue com seu ótimo trabalho no site, abraço!

Leave a Reply

Your email address will not be published. Required fields are marked *