SouBetoMuniz
Tenho21anosesouummineiro-capixaba.
Trabalho na Onrizon Social Games	
  
como Front-end Engineer
CONTATO@BETOMUNIZ.COM
WWW.BETOMUNIZ.COM
GITHUB.COM/OBETOMUNIZ
FB.COM/OBETOMUNIZ
OK!
Vamos começar...
SASS & COMPASS
O CSS Ninja Workflow
O que é SASS?
sass-lang.com
SASS é um pré-processador escrito em Ruby
que permite “estender” o CSS nativo e com
isso inserir mais produtividade
no des...
Features do SASS
Variáveis, If”s…else, for”s, Collections, etc.
Aninhamento de Seletores
Herança de de Seletores
Variadas ...
Boas práticas e agilidade na escrita CSS
sass-lang.com
Herança
sass-lang.com
Variavéis, nesting, functions, if’s…else, for, etc.
sass-lang.com
E o Compass?


…onde entra nisso?
compass-style.org
compass-style.org
Compass é uma biblioteca de funcionalidades
escrita em Ruby que agrega o desenvolvimento com SASS
atravé...
Features do Compass
Módulos para CSS3
Helpers
Módulos para Layout
Módulo de Reset
Módulo de Tipografia
Gerador de CSS Spri...
Helpers
compass-style.org
Mixins
compass-style.org
Achei legal…


…mas terei que aprender Ruby?
?
NÃO
Para rodar SASS e Compass existem
vários caminhos, e alguns deles são:
CLI
Aplicativos
Task Runners
IDEs
Etc.
$	
  compass	
  watch
http://sass-lang.com/documentation/
http://compass-style.org/reference/compass/
e para mais informaç...
A lista de Aplicativos mais conhecidos capazes de compilar SASS e
Compass são:
Linux, Win e MacOS - free
Via Apps
MacOS - ...
Koala-app
koala-app.com
via Grunt
com	
  SASS	
  e	
  Compass	
  já	
  instalados	
  no	
  seu	
  computador,	
  digite	
  na	
  sua	
  aplicação	...
E pra finalizar esse blá blá blá...
Vou só falar um pouquinho do...
config.rb
goo.gl/nsv2YQ
Legal... Mas e agora?
Show me the Code!
O	
  que	
  faremos?
BRINCAR	
  um	
  pouco	
  com	
  SASS	
  e	
  Compass.
…para	
  isso	
  façam	
  o	...
Referências
http://sass-lang.com/
http://compass-style.org/
https://github.com/nextmat/compass-960-plugin
http://koala-app...
FIMObrigado pela presença de todos.
SASS e Compass, O CSS Ninja Workflow
SASS e Compass, O CSS Ninja Workflow
Próximos SlideShares
Carregando em…5
×

SASS e Compass, O CSS Ninja Workflow

475 visualizações

Publicada em

Neste talk, será abordado de forma prática e conceitual como desenvolver o CSS cotidiano de forma estendida, produtiva e automatizada com SASS e COMPASS. Juntos vamos desenvolver através de um live coding bastante interativo um pequeno projeto utilizando este belo workflow a nosso favor.

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
475
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
8
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

SASS e Compass, O CSS Ninja Workflow

  1. 1. SouBetoMuniz Tenho21anosesouummineiro-capixaba. Trabalho na Onrizon Social Games   como Front-end Engineer
  2. 2. CONTATO@BETOMUNIZ.COM WWW.BETOMUNIZ.COM GITHUB.COM/OBETOMUNIZ FB.COM/OBETOMUNIZ
  3. 3. OK! Vamos começar...
  4. 4. SASS & COMPASS O CSS Ninja Workflow
  5. 5. O que é SASS? sass-lang.com
  6. 6. SASS é um pré-processador escrito em Ruby que permite “estender” o CSS nativo e com isso inserir mais produtividade no desenvolvimento Front End do dia a dia. sass-lang.com
  7. 7. 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
  8. 8. Boas práticas e agilidade na escrita CSS sass-lang.com
  9. 9. Herança sass-lang.com
  10. 10. Variavéis, nesting, functions, if’s…else, for, etc. sass-lang.com
  11. 11. E o Compass?
 
…onde entra nisso? compass-style.org
  12. 12. compass-style.org Compass é uma biblioteca de funcionalidades escrita em Ruby que agrega o desenvolvimento com SASS através de mixins, functions, helpers…
  13. 13. 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
  14. 14. Helpers compass-style.org
  15. 15. Mixins compass-style.org
  16. 16. Achei legal…
 
…mas terei que aprender Ruby? ?
  17. 17. NÃO
  18. 18. Para rodar SASS e Compass existem vários caminhos, e alguns deles são: CLI Aplicativos Task Runners IDEs Etc.
  19. 19. $  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:
  20. 20. 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
  21. 21. Koala-app koala-app.com
  22. 22. 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
  23. 23. E pra finalizar esse blá blá blá... Vou só falar um pouquinho do...
  24. 24. config.rb goo.gl/nsv2YQ
  25. 25. Legal... Mas e agora?
  26. 26. 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
  27. 27. 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
  28. 28. FIMObrigado pela presença de todos.

×