SASS + COMPASS - Alta Produtividade no Front-end

51

description

Introdução aos pré-processadores, features, comandos, instalação e frameworks.

Transcript of SASS + COMPASS - Alta Produtividade no Front-end

Page 1: SASS + COMPASS - Alta Produtividade no Front-end
Page 2: SASS + COMPASS - Alta Produtividade no Front-end

@andersonaguiar

Trabalho na

Sobre mim

Anderson Aguiar, 23

Page 3: SASS + COMPASS - Alta Produtividade no Front-end

Os 3 mais populares

Page 4: SASS + COMPASS - Alta Produtividade no Front-end

http://sass-lang.com/

Page 5: SASS + COMPASS - Alta Produtividade no Front-end
Page 6: SASS + COMPASS - Alta Produtividade no Front-end

Features

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

Page 7: SASS + COMPASS - Alta Produtividade no Front-end

Features

Variables

Page 8: SASS + COMPASS - Alta Produtividade no Front-end

Features

Mathematical Expressions

Page 9: SASS + COMPASS - Alta Produtividade no Front-end

Features

Mathematical Expressions

Page 10: SASS + COMPASS - Alta Produtividade no Front-end

Features

Colors

Page 11: SASS + COMPASS - Alta Produtividade no Front-end

Features

Nesting

Page 12: SASS + COMPASS - Alta Produtividade no Front-end

Features

Mixins

Page 13: SASS + COMPASS - Alta Produtividade no Front-end

Features

Mixins

Page 14: SASS + COMPASS - Alta Produtividade no Front-end

Features

Selector Inheritance

Page 15: SASS + COMPASS - Alta Produtividade no Front-end

Features

Compression + Silent comments

Page 16: SASS + COMPASS - Alta Produtividade no Front-end

Features

Imports

Page 17: SASS + COMPASS - Alta Produtividade no Front-end

Syntax

SCSS SASS

Page 18: SASS + COMPASS - Alta Produtividade no Front-end

Instalação

Page 19: SASS + COMPASS - Alta Produtividade no Front-end

Instalação

Instalar o ruby:

http://rubyinstaller.org/downloads/

Page 20: SASS + COMPASS - Alta Produtividade no Front-end

Instalação

http://tinyurl.com/9nxw79l

Page 21: SASS + COMPASS - Alta Produtividade no Front-end

Instalação

Page 22: SASS + COMPASS - Alta Produtividade no Front-end

Instalação

Page 23: SASS + COMPASS - Alta Produtividade no Front-end

Instalação

gem install sass ;)

Page 24: SASS + COMPASS - Alta Produtividade no Front-end

Utilização

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

Page 25: SASS + COMPASS - Alta Produtividade no Front-end

Utilização

Mas eu não gosto do terminal

Page 26: SASS + COMPASS - Alta Produtividade no Front-end

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

Page 27: SASS + COMPASS - Alta Produtividade no Front-end

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

Page 28: SASS + COMPASS - Alta Produtividade no Front-end

Perguntas sobre SASS?

?

Page 29: SASS + COMPASS - Alta Produtividade no Front-end

http://compass-style.org/

Page 30: SASS + COMPASS - Alta Produtividade no Front-end
Page 31: SASS + COMPASS - Alta Produtividade no Front-end

Frameworks

Page 32: SASS + COMPASS - Alta Produtividade no Front-end

Features

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

Page 33: SASS + COMPASS - Alta Produtividade no Front-end

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 ;)

Page 34: SASS + COMPASS - Alta Produtividade no Front-end

Configuração

Page 35: SASS + COMPASS - Alta Produtividade no Front-end

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...

Page 36: SASS + COMPASS - Alta Produtividade no Front-end

Features

CSS3

Page 37: SASS + COMPASS - Alta Produtividade no Front-end

Features

CSS3

Page 38: SASS + COMPASS - Alta Produtividade no Front-end

Features

Media queries

Page 39: SASS + COMPASS - Alta Produtividade no Front-end

Features

Sprites

Page 40: SASS + COMPASS - Alta Produtividade no Front-end

Features

Images

Page 41: SASS + COMPASS - Alta Produtividade no Front-end

Features

Images

Page 42: SASS + COMPASS - Alta Produtividade no Front-end
Page 43: SASS + COMPASS - Alta Produtividade no Front-end
Page 44: SASS + COMPASS - Alta Produtividade no Front-end

Features

Grids

Page 45: SASS + COMPASS - Alta Produtividade no Front-end

Features

Grids – Instalação e uso

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

Page 46: SASS + COMPASS - Alta Produtividade no Front-end

Features

Stats

Page 47: SASS + COMPASS - Alta Produtividade no Front-end

Pré-processadores de CSS

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

Page 48: SASS + COMPASS - Alta Produtividade no Front-end

Devo usar?

• Já domino o CSS tradicional?

• Irá agregar melhoria no meu desenvolvimento?

Page 49: SASS + COMPASS - Alta Produtividade no Front-end

Dúvidas?

?

Page 50: SASS + COMPASS - Alta Produtividade no Front-end

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/

Page 51: SASS + COMPASS - Alta Produtividade no Front-end

Obrigado!

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

Contato: @andersonaguiar

[email protected]