SASS e Compass, O CSS Ninja Workflow

Fff7258836f20ea66b061b49a51fe8dd?s=47 Beto Muniz
November 30, 2013

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.

Fff7258836f20ea66b061b49a51fe8dd?s=128

Beto Muniz

November 30, 2013
Tweet

Transcript

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

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