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:
- > Advanced System Settings
- > Advanced
- > Environment Variables
- > 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
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.
Tutorial muito bem e bem explicado. Se fala tanto em Sass e esquecem de mostrar como instalar. Foi de muita ajuda.
Pingback: Preprocessadores de CSS
Cara, se eu tivesse vindo aqui antes, já tava usando o SASS, mas quebrei a cabeça um pouquinho lendo o site dessa maravilha http://sass-lang.com/
Vlw.
Pingback: Dica para CSS (Usando SASS ou LESS)
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!
Muito bom a sua explicação, mais te confesso que fiquei sabendo do scss hoje ao editar um template de wordpress no qual não usa o css comum, minha pergunta é, com faço pra abrir esses arquivos e fazer as edições necessárias, para que faça efeito no site?
Tentei pelo Dreamweaver e ele não aceita a extensão, consegui abrir no editor de arquivos do CPANEL, salvo, porém não gera efeito nenhum no front-end do site, e agora?