Syntactically Awesome Style Sheets"Folhas de Estilo Sintaticamente Impressionantes"

Sass & Compass

Pré-processadores de CSS

*.scss*.sass*.stylus*.less

Pré-processador

style.css

Browser

Pré-processadores mais populares

Por que Sass ?● Mais ativo na comunidade (criado em 2007 por Hampton Catlin)● Sintaxe simples● Curva de aprendizado baixa● Facilita a manutenção● Mais fácil utilizar modularização● DRY● Compass (framework mais completo)● Diversos outros plugins

SassMeister - The Sass Playground!

node Sass

lib Sass

Apps

Como começar ?

$ gem install sass

Somente Sass

$ sass file.scss file.css

$ sass --watch folder

Comandos Sass

$ sass file.scss file.css --style nested|expanded|compact|compressed

Duas sintaxes

*.sass *.scss

Sass vs CSS● Partials & Imports● Variables● Estruturas de controle (if-else, for, each)● Functions● Mixins● Nested selectors● Placeholder selectors ● Ancestor selectors● Pseudo selectors

Partials & @importArquivos que iniciam com "_" são chamados de partials, esses arquivos não são compilados para CSS mas podem ser importados dentro de outros arquivos para serem reutilizados.

_typography.scss

_sprites.scss

_icons.scss style.scss

style.css

Variáveis

Nested selectors

Pseudo seletores

Ancestor selector

@extend

Placeholder seletor

Media Queries

@mixin

@function

@each

@for

O Compass é uma imensa coleção de mixins, funções e utilidades diversas

$ gem install compass

Sass e Compass

config.rb

$ compass compile

$ compass watch

Comandos Compass

$ compass install bootstrap

Algumas utilidades do Compass

● Reset

● Mixins para prefixar as novas regras do CSS3

● Mixins para importar fontes

● Mixins para para criar regras cross-browser

● Mixins para trabalhar com gradientes

● Mixins para gerar sprites

● Mixins para manipular imagens (ex: base64 inline)

● E muito mais...

Reset

Prefixos para novas regras do CSS3

Importando fontes

CSS Hacks

CSS3 Gradients

Sprites

Imagens

Boilerplate

E muito mais

Obrigado!

@carlosrberto

http://carlosroberto.name