O documento descreve o Sass, uma linguagem de pré-processamento para CSS. Ele explica que o Sass ajuda a manter folhas de estilo CSS organizadas e compactas, permite aninhamento, importação, mixins, extensão e operações matemáticas em CSS. O documento também fornece instruções básicas de instalação e uso do Sass.

1. Syntactically Awesome Style
Sheets
Állef A. Lôbo - allef.lobo@gmail.com

2. Roteiro
• O que é?
• Para que serve?
• Como utilizar?
• Exemplos

3. O que é?
• Linguagem de marcação
• Pré-processador para CSS

4. Para que serve?
O Sass ajuda a manter grandes folhas de estilo
bem organizadas e a obter pequenas folhas de
estilo.

6. Instalação
Requer que o Ruby esteja instalado!
• Linha de comando no terminal:
▫ gem install sass
• Verificar se o Sass foi instalado:
▫ sass –v

7. Pré-processando
• Arquivos individuais:
• Diretórios: sass --watch app/sass:public/stylesheets
sass input.scss output.css

8. Variáveis
• O símbolo $ define uma variável
Sass CSS

9. Aninhamento
Sass permitirá que você aninhe seus seletores CSS de uma forma que segue a mesma hierarquia visual do seu
HTML.
Sass CSS

10. Import
Sass irá pegar o arquivo que você deseja importar e combiná-lo com o arquivo
que você está importando para que você possa servir um único arquivo CSS para
o navegador da web.

11. Mixins
Um mixin permite que você faça grupos de declarações CSS que você deseja
reutilizar em todo o seu site.

12. Extend
Usar @extend permite que você compartilhe um conjunto de propriedades
CSS de um seletor para outro.

13. Operadores
Sass tem um punhado de operadores matemáticos padrão como +, -, *, / e %.

14. Referências
• http://blog.caelum.com.br/css-menos-sofrido-
com-sass/
• http://sass-lang.com/guide