Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
Upcoming SlideShare
Loading in …5
×

SASS e Compass, O CSS Ninja Workflow

579 views

Published on

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.

Published in: Technology
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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.

×