SASS e Compass, O CSS Ninja Workflow

30

Transcript of SASS e Compass, O CSS Ninja Workflow

Page 1: SASS e Compass, O CSS Ninja Workflow
Page 2: SASS e Compass, O CSS Ninja Workflow

Sou Beto MunizTenho 21 anos e sou um mineiro-capixaba.

Trabalho na Onrizon Social Games  como Front-end Engineer

Page 3: SASS e Compass, O CSS Ninja Workflow

[email protected]

WWW.BETOMUNIZ.COM

GITHUB.COM/OBETOMUNIZ

FB.COM/OBETOMUNIZ

Page 4: SASS e Compass, O CSS Ninja Workflow

OK!Vamos começar...

Page 5: SASS e Compass, O CSS Ninja Workflow

SASS & COMPASSO CSS Ninja Workflow

Page 8: SASS e Compass, O CSS Ninja Workflow

Features do SASS

Variáveis, If”s…else, for”s, Collections, etc.

Aninhamento de Seletores

Herança de de Seletores

Variadas CSS Outputs

Organização e Lint

Funções para controle de Cores

Operadores Math

@import inteligente

Page 12: SASS e Compass, O CSS Ninja Workflow

E o Compass?…onde entra nisso?

!compass-style.org

Page 13: SASS e Compass, O CSS Ninja Workflow

compass-style.org

Compass é uma biblioteca de funcionalidades

escrita em Ruby que agrega o desenvolvimento com SASS

através de mixins, functions, helpers…

Page 14: SASS e Compass, O CSS Ninja Workflow

Features do Compass

Módulos para CSS3

Helpers

Módulos para Layout

Módulo de Reset

Módulo de Tipografia

Gerador de CSS Sprite

Plugins* Dedicados

Page 15: SASS e Compass, O CSS Ninja Workflow

Helpers

compass-style.org

Page 16: SASS e Compass, O CSS Ninja Workflow

Mixins

compass-style.org

Page 17: SASS e Compass, O CSS Ninja Workflow

Achei legal……mas terei que aprender Ruby?

??

Page 18: SASS e Compass, O CSS Ninja Workflow

NÃO

Page 19: SASS e Compass, O CSS Ninja Workflow
Page 20: SASS e Compass, O CSS Ninja Workflow

Para rodar SASS e Compass existem vários caminhos, e alguns deles são:

CLI

Aplicativos

Task Runners

IDEs

Etc.

Page 21: SASS e Compass, O CSS Ninja Workflow

$  compass  watch

http://sass-lang.com/documentation/

http://compass-style.org/reference/compass/

e para mais informações acesse:

$  sudo  gem  install  sass  &&  sudo  gem  install  compass

Via command line

com  Ruby  instalado  no  seu  Sistema  Operacional

digite  na  sua  aplicação  de  terminal  o  comando:

crie  dois  arquivos  chamados  project/sass/arquivo.scss  e  um  arquivo  project/config.rb*

e  dentro  do  diretorio  project,  digite  o  seguinte  comando  no  terminal:

Page 22: SASS e Compass, O CSS Ninja Workflow

A lista de Aplicativos mais conhecidos capazes de compilar SASS e Compass são:

Linux, Win e MacOS - free

Via Apps

MacOS - pago

MacOS - pago

Win e MacOS - free

MacOS - pago

Page 23: SASS e Compass, O CSS Ninja Workflow

Koala-app

koala-app.com

Page 24: SASS e Compass, O CSS Ninja Workflow

via Grunt

com  SASS  e  Compass  já  instalados  no  seu  computador,  digite  na  sua  aplicação  de  terminal  o  comando:

e  por  ultimo  crie  a  tarefa  em  seu  Gruntfile.js  de  acordo  com  a  documentação  do  grunt-­‐contrib-­‐compass

e  para  mais  informações  acesse:

$  npm  install  grunt-­‐contrib-­‐compass  -­‐-­‐save-­‐dev

https://github.com/gruntjs/grunt-contrib-compass

Page 25: SASS e Compass, O CSS Ninja Workflow

E pra finalizar esse blá blá blá...Vou só falar um pouquinho do...

Page 26: SASS e Compass, O CSS Ninja Workflow

config.rb

goo.gl/nsv2YQ

Page 27: SASS e Compass, O CSS Ninja Workflow

Legal... Mas e agora?

Page 28: SASS e Compass, O CSS Ninja Workflow

Show me the Code!

O  que  faremos?

BRINCAR  um  pouco  com  SASS  e  Compass.

…para  isso  façam  o  download  do  Koala-­‐app  aqui:

goo.gl/NC47ny

e  também  das  estruturas  aqui:

goo.gl/Yxbp8U

Page 29: SASS e Compass, O CSS Ninja Workflow

Referências

http://sass-lang.com/

http://compass-style.org/

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

http://koala-app.com/

http://compass-style.org/help/tutorials/configuration-reference/

http://www.slideshare.net/andersonagr/sass-compass-alta-produtividade-no-frontend

https://github.com/obetomuniz/talk-devincompanybh-setembro-2013

http://alistapart.com/article/why-sass

Page 30: SASS e Compass, O CSS Ninja Workflow

FIMObrigado pela presença de todos.