Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Deep Dive Into CSS Preprocessors

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 56 Publicité

Deep Dive Into CSS Preprocessors

Télécharger pour lire hors ligne

During this talk, Jonathan Verrecchia (@verekia) demonstrates the power of CSS preprocessors and explain why he believes these are a game changer for front-end development.

CSS preprocessors are used to enhance CSS with amazing new features (variables, functions, file concatenation and minification, color operations, etc.) and can dramatically improve your development workflow. Jonathan sheds light on some very common misconceptions about them and will help you choose between Sass Less and Stylus for your next project.

The talk will cover the basics of CSS preprocessors but also more advanced techniques with concrete use cases. If you haven’t dived into CSS preprocessors yet, if you’re still skeptical, or if you want one more proof that they’re the way to go now, this talk is for you!

During this talk, Jonathan Verrecchia (@verekia) demonstrates the power of CSS preprocessors and explain why he believes these are a game changer for front-end development.

CSS preprocessors are used to enhance CSS with amazing new features (variables, functions, file concatenation and minification, color operations, etc.) and can dramatically improve your development workflow. Jonathan sheds light on some very common misconceptions about them and will help you choose between Sass Less and Stylus for your next project.

The talk will cover the basics of CSS preprocessors but also more advanced techniques with concrete use cases. If you haven’t dived into CSS preprocessors yet, if you’re still skeptical, or if you want one more proof that they’re the way to go now, this talk is for you!

Publicité
Publicité

Plus De Contenu Connexe

Publicité
Publicité

Deep Dive Into CSS Preprocessors

  1. Deep dive into CSS Preprocessors @SFHTML5 – May 31st 2012
  2. Jonathan Verrecchia Front-End Engineer at Author of a French book about HTML5 Created H5BP's builder I'm @verekia and I blog on verekia.com
  3. Questions • Feel free to interrupt me at anytime • Or tweet your questions using #csspp ?
  4. I will talk about • CSS weaknesses • Preprocessors features • Common misconceptions • Sass, Less or Stylus? • Workflow and techniques • Preprocessors + OOCSS
  5. CSS weaknesses
  6. At the office... Product Manager: “Can we try changing our theme quickly? I think blue buttons would be more engaging!” You: “Hm... It's not that quick. Come back in 30 min?” Product Manager 30 min later: “Ah it's ugly! Can we try a lighter blue and compare it to this orange and green too?”
  7. CSS variables? You won't be able to use them until IE 7, 8, 9 , 10, 11, [...] usage drops below 1%. “Variables... finally!”
  8. 3 major CSS weaknesses • Lack of essential basic features • Hard to maintain (huge messy CSS files) • Not DRY enough - leads to mistakes
  9. Working with multiple files Having multiple CSS files is essential for maintainability and collaboration But @import sucks (additional HTTP requests) We need to use a build tool for concatenation. ... but maybe it can do more than just that? This is what CSS preprocessors do :)
  10. The 3 most popular preprocessors They are all great :)
  11. Features
  12. About those features... Less, Sass and Stylus support them all They don't enhance CSS, but improve your development workflow
  13. Variables They are actually constants (and it's fine) $my_blue: #4e6cb0; // Sass @my_blue: #4e6cb0; // Less my_blue = #4e6cb0; // Stylus $primary_color: $my_blue; h1 { color: $primary_color; }
  14. Variables Types Variables are not just for colors! $fonts: Helvetica, Arial, sans-serif; $images_path: "../img/" $font-size: 1.5em; $margin: 20px; $width: 80%;
  15. Operations and color functions Math and colors operations width: 25px * 4 + 100px / 2 – 50px; // = 100px color: #990033 + #666666; // = #FF66CC Color functions $light_blue: lighten($my_blue, 20%); $flashy_blue: saturate($my_blue, 50%);
  16. Mixins Functions like lighten() return a value. Mixins don't return anything but output CSS. @mixin border-radius($radius: 10px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .button { @include border-radius(4px); }
  17. Nesting .pop { .link { .pop-btn { &:hover { } } } } // ======== OUTPUT ======== // ======== OUTPUT ======== .pop {} .link {} .pop .pop-btn {} .link:hover {} Don't nest too much (4 levels max)
  18. Imports and minification Imports now work with no performance costs! @import "colors"; @import "typography"; @import "layout"; CSS output can be clear or minified #main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text- decoration:underline}
  19. Misconceptions
  20. “I need a Ruby or Node backend” • Sass is written in Ruby • Less and Stylus are written in JavaScript This does NOT mean you need Ruby or Node on your production server to use them. You need them on your development machine.
  21. “Less runs client-side” Less can run client-side. OK for quick testing or to compile in-browser if you can't access your dev environment. Never - EVER - use it in production, it's even worse than CSS' @import for performance. Always use Node (or Rhino).
  22. “It's hard to install” Both Ruby and Node are easy to install on any platform: Ruby is pre-installed, Node.pkg RubyInstaller.exe, Node.exe apt-get install ruby / nodejs
  23. “Bootstrap uses Less, so it's better” According to @fat, they chose Less because: • It was compiling faster than Sass (probably not true anymore since Sass has caching) • They are friends with Alexis Sellier (Less) so they can easily request a fix or a feature So nothing you should worry about.
  24. Even big guys can make mistakes
  25. Sass, Less or Stylus?
  26. How to choose? Bad criterion • The syntax (almost the same) • Twitter Bootstrap (exists in Sass) Good criterion • Available features (Sass and Stylus) • Community (Sass and Less) • Ruby vs. JS if you want to get involved
  27. Related projects Sass: Hampton Catlin - @hcatlin (Inventor) Nathan Weizenbaum - @nex3 (Lead developer) Stylus: TJ Holowaychuk - @tjholowaychuk
  28. Lead and (almost) unique developer of Less
  29. Choose wisely...
  30. Sass welcome package! • 2 syntaxes: .sass and .scss (CSS-like) • Twitter Bootstrap and ZURB Foundation • Even more crazy features (extend, if, for...) Recommended blog:
  31. Compass Chris Eppstein - @chriseppstein (Sass core) CSS3, Spriting, Grids, Typography, Data-URLs, Cross-browser, assets path, tons of helpers... @import "compass/css3/border-radius"; .button { @include border-radius(10px); }
  32. sonspring.com
  33. Workflow
  34. Installing and Running Just Sass: > gem install sass > sass --watch <path> Sass + Compass: > gem install compass > compass create <path> > compass watch
  35. Avoiding the command line Codekit
  36. GUI compilers Codekit, LiveReload, Less.app, Compass.app, Scout, Crunchapp, SimpLess Compass.app, Scout, Crunchapp, SimpLess, WinLess, LiveReload (alpha) Compass.app, Scout, Crunchapp, SimpLess
  37. Syntax Highlighting Editors and IDEs that support Sass: VIM, Emacs, Sublime Text 2, TextMate, Eclipse, NetBeans, WebStorm, Visual Studio, PyCharm, RadRails, RubyMine, Komodo, Coda, GEdit, [...]
  38. Project structure example css/ global.scss global.css currentpage.scss currentpage.css scss/ global/ _colors.scss _helpers.scss Underscore-prefixed files _mixins.scss don't generate .css files _reset.scss _typography.scss components/ _buttons.scss _popups.scss
  39. Debugging Debug mode > sass –-watch <path> --debug-info Firebug plugin: FireSass
  40. Techniques
  41. Handy conversions Pixels to ems font-size: (18px / $context) * 1em; // 1.125em Pixels to percentages $wrapper_width: 1140px; .responsive-unit { width: percentage(200px / $wrapper_width) margin: percentage(15px / $wrapper_width) }
  42. Nesting and Media Queries .menu-item { display: inline-block; @media screen and (max-width: 480px) { display: block; } } Sass 3.2 allows blocks as mixins parameters: .menu-item { display: inline-block; @include respond-to(small-screen) { display: block; } }
  43. Mobile-first responsive design @media (min-width: 480px) {}
  44. Mobile-first responsive design
  45. Mobile-first responsive design // modern.scss @import "base"; @media (min-width: 480px) { @import "480-up" } @media (min-width: 768px) { @import "768-up" } @media (min-width: 1200px) { @import "1200-up" } // ie.scss @import "base"; @import "480-up"; @import "768-up"; by Nicolas Gallagher ♥
  46. Using nesting with Modernizr and IE .map { .menu-item { display: inline-block; .no-geolocation & { background: "map.png"; .ltie8 & { } display: inline; } zoom: 1; } } // ======== OUTPUT ======== // ======== OUTPUT ======== .map {} .menu-item {} .no-geolocation .map {} .ltie8 .menu-item {}
  47. Generating a color palette $base: #633; $complement1: adjust-hue($base, 180); $complement2: darken(adjust-hue($base, 180), 5%); $lighten1: lighten($base, 15%); $lighten2: lighten($base, 30%); by Joshua Johnson
  48. OOCSS
  49. OOCSS OOCSS is a popular solution for large-scale CSS websites by Nicole Sullivan (@stubbornella) Its core principle is to use multiple classes to make objects inherit from each other <a class="button big-button"> It's heavy for the DOM but very efficient in terms of CSS file size in the long run
  50. Facebook's DOM MOTHER OF DOM...
  51. SASS has @Extend .button { background: #00f; } .big-button { @extend .button; width: 200px; } // ======== OUTPUT ======== .button, .big-button { background: #00f } .big-button { width: 200px }
  52. @Extend vs OOCSS If you build a complex components library with @extend, you'll have a LOT of selectors • @extend ruins your production CSS • OOCSS ruins your DOM My opinion: At some point @extend might overtake OOCSS when we'll have better tools (we debug seamlessly minified CSS already)
  53. Preprocessors + OOCSS Without @extend, preprocessors and OOCSS are perfectly compatible Preprocessors are for the stuff you don't want in your production CSS (they help developers) OOCSS is for the stuff you want in your production CSS (it is performant)
  54. Developer Efficiency Chart Parameters: Less Stylus Sass • DRY and file size OOCSS OOCSS OOCSS • Features • Community OOCSS Sass Less Stylus Naive CSS
  55. By becoming web developers, you agreed on staying up to date with all the new cool stuff. This is the new cool stuff :)
  56. Thanks! verekia.com/slides/css-preprocessors by @verekia

×