SASS e Compass, O CSS Ninja Workflow

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.

Transcript

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