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

    Sou Beto Muniz Tenho 21 anos e sou um mineiro-capixaba.

    Trabalho na Onrizon Social Games   como Front-end Engineer
  3. 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
  4. 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
  5. 13.

    compass-style.org Compass é uma biblioteca de funcionalidades escrita em Ruby

    que agrega o desenvolvimento com SASS através de mixins, functions, helpers…
  6. 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
  7. 18.
  8. 19.
  9. 20.

    Para rodar SASS e Compass existem vários caminhos, e alguns

    deles são: CLI Aplicativos Task Runners IDEs Etc.
  10. 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:
  11. 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
  12. 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
  13. 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