@andersonaguiar

Trabalho na

Sobre mim

Anderson Aguiar, 23

Os 3 mais populares

http://sass-lang.com/

Features

• Variables• Nesting• Mixins• Selector Inheritance• Compression• Clean code• Silent comments• Colors(darken, lighten, saturate, grayscale)• Mathematical Expressions• Imports

Features

Variables

Features

Mathematical Expressions

Features

Mathematical Expressions

Features

Colors

Features

Nesting

Features

Mixins

Features

Mixins

Features

Selector Inheritance

Features

Compression + Silent comments

Features

Imports

Syntax

SCSS SASS

Instalação

Instalação

Instalar o ruby:

http://rubyinstaller.org/downloads/

Instalação

http://tinyurl.com/9nxw79l

Instalação

Instalação

Instalação

gem install sass ;)

Utilização

sass --watch arquivo.scss:arquivo.csssass --watch sass:css --style compact

Utilização

Mas eu não gosto do terminal

http://mhs.github.com/scout-app/

http://mhs.github.com/scout-app/

Perguntas sobre SASS?

?

http://compass-style.org/

Frameworks

Features

• Frameworks• Comunidade forte• Já vem com SASS por default• CSS3• Sprites• Images• Estatísticas dos SCSS/CSS• Validação de CSS• ...

Instalação + Utilização

1) Entrar no diretório do projeto2) Digitar no terminal: compass create3) Editar o config.rb que foi gerado, para as suas preferências4) Digitar no terminal: compass watch5) Começar a mágica ;)

Configuração

Features

CSS3

• Não precisa preencher vendors, o compass faz isso pra você

• Incompatibilidade de sintaxe• Clearfix• Box• Box-shadow• Border radius• Text shadow• Gradient• Etc...

Features

CSS3

Features

CSS3

Features

Media queries

Features

Sprites

Features

Images

Features

Images

Features

Grids

Features

Grids – Instalação e uso

https://github.com/nextmat/compass-960-plugin

Features

Stats

Pré-processadores de CSS

Less: http://lesscss.org/Stylus: http://learnboost.github.com/stylus/Sass: http://sass-lang.com/

Devo usar?

• Já domino o CSS tradicional?

• Irá agregar melhoria no meu desenvolvimento?

Dúvidas?

?

Referências

http://www.tidbits.com.br/desenvolvendo-css-de-forma-mais-produtiva-usando-sass (imagem de instalação windows, fluxo variáveis de ambiente)

http://www.slideshare.net/chriseppstein/authoring-stylesheets-with-compass-sass

http://www.slideshare.net/hlb/sass-compass-7653212

http://www.slideshare.net/adantz/frontendentwicklung-mit-sass-compass

http://www.slideshare.net/verekia/deep-dive-into-css-preprocessors

http://compass-style.org/

http://sass-lang.com/

Obrigado!

Disponível em:http://www.slideshare.net/andersonagr

Contato: @andersonaguiar

andersonaguiarrr@gmail.com