Scrivere CSS agile con Compass/SASS + debug facile

984 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
984
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Scrivere CSS agile con Compass/SASS + debug facile

  1. 1. SASS & COMPASS CSS with less STRESSlunedì 5 novembre 2012
  2. 2. CSS can become messylunedì 5 novembre 2012
  3. 3. CSS can become messy • Many site sections • Many page sections • Many devices • Many screen resolutions • Many colors, fonts, helpers, etc.lunedì 5 novembre 2012
  4. 4. CSS can become messy • Not a unique author • Not a unique coding stylelunedì 5 novembre 2012
  5. 5. CSS can become looonglunedì 5 novembre 2012
  6. 6. CSS can become looong • we could split the code into more CSS files, big, long authoring CSS files but it would mean more HTTP requests • not so easy you first look to someone elses code expecially when to read and to managelunedì 5 novembre 2012
  7. 7. CSS can be repetitivelunedì 5 novembre 2012
  8. 8. CSS can be repetitive • Rules with same #id + different .class • Rules with same font, same color in different sections of the pagelunedì 5 novembre 2012
  9. 9. CSS is not a complete languagelunedì 5 novembre 2012
  10. 10. CSS is not a complete language • No variables • No extending • No math • Few functions (rgb, rgba, ...)lunedì 5 novembre 2012
  11. 11. What if all this could CHANGE?lunedì 5 novembre 2012
  12. 12. What if we could use... NESTING?lunedì 5 novembre 2012
  13. 13. NESTING #header { #header li { li { margin-right: 1em; margin-right: 1em; } } #header a { a { color: white; color: white; background: red; background: red; display: block; display: block; } &:hover { #header a:hover { color: red; color: red; background: white; background: white; } } } }lunedì 5 novembre 2012
  14. 14. What if we could use... VARIABLES?lunedì 5 novembre 2012
  15. 15. VARIABLES $mainColor: #CE4DD6; button { button { background: #CE4DD6; background: $mainColor; } } a { a { color: #CE4DD6; color: $mainColor; } } header { header { border-bottom: 3px; border-bottom: 3px; border-color: #CE4DD6; border-color: $mainColor; } }lunedì 5 novembre 2012
  16. 16. What if we could use... FUNCTIONS?lunedì 5 novembre 2012
  17. 17. FUNCTIONS button { button { background: #CE4DD6; background: $mainColor; } } button:hover { button:hover { background: #D76DDE; background: saturate($mainColor, 10%); } }lunedì 5 novembre 2012
  18. 18. What if we could do... some MATH?lunedì 5 novembre 2012
  19. 19. MATH $width: 960; #side { #side { width: 23.95833%; width: 230 / $width; margin-right: 2.08333%; margin-right: 20 / $width; } } #main { #main { width: 47.91667%; width: 460 / $width; margin-right: 2.08333%; margin-right: 20 / $width; } } #more { #more { width: 23.95833%; width: 230 / $width; } }lunedì 5 novembre 2012
  20. 20. What if we could use... PARTIALS?lunedì 5 novembre 2012
  21. 21. PARTIALS “Could you please explain your strategy for building CSS? How do you start and what does the structure of your style sheet look like? How do you structure your code?”lunedì 5 novembre 2012
  22. 22. PARTIALS @import "reset"; /* _reset.scss */ @import "mixins"; /* _mixins.scss */ @import "base"; /* _base.scss */ @media only screen and (min-width: 481px) { @import "481up"; /* _481up.scss */ } @media only screen and (min-width: 768px) { @import "grid"; @import "768up"; /* _768up.scss */ } @media print { @import "print"; /* _print.scss */ }lunedì 5 novembre 2012
  23. 23. lunedì 5 novembre 2012
  24. 24. SASS Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more.lunedì 5 novembre 2012
  25. 25. SASS 3 does all this (and lots more)lunedì 5 novembre 2012
  26. 26. It also allows to do more powerful stuff (if you love power & complexity) using Mixinslunedì 5 novembre 2012
  27. 27. It also removes comments we dont want to publish i.g. "fuck IE"lunedì 5 novembre 2012
  28. 28. It also allows to choose the output CSS style, including compressedlunedì 5 novembre 2012
  29. 29. So why arent we using it (yet)?lunedì 5 novembre 2012
  30. 30. Because its hard to debug?lunedì 5 novembre 2012
  31. 31. lunedì 5 novembre 2012
  32. 32. COMPASS Compass is an open-source CSS Authoring Framework. Compass uses SASS.lunedì 5 novembre 2012
  33. 33. COMPASS extends SASS + gives you some interesting featureslunedì 5 novembre 2012
  34. 34. 1. ITS EASY TO DEBUG!lunedì 5 novembre 2012
  35. 35. 1. ITS EASY TO DEBUG! Click on definitionlunedì 5 novembre 2012
  36. 36. 1. ITS EASY TO DEBUG! Get the source file and line numberlunedì 5 novembre 2012
  37. 37. (claps)lunedì 5 novembre 2012
  38. 38. 2. ITS LOADED WITH LOTS OF HELPERS & PATTERNSlunedì 5 novembre 2012
  39. 39. 2. ITS LOADED WITH LOTS OF HELPERS & PATTERNS CSS3,Typography, Utilities, Reset, Grids, Clearfix, Sticky Footer, and morelunedì 5 novembre 2012
  40. 40. 3. IT MAKES VERY EASY TO WORK with SPRITESlunedì 5 novembre 2012
  41. 41. 3. IT MAKES VERY EASY TO WORK with SPRITES You just add the images, it generates the sprite + gives you a helper to use your imageslunedì 5 novembre 2012
  42. 42. demolunedì 5 novembre 2012
  43. 43. Resume •Nesting • Variables • Functions • Math • Partialslunedì 5 novembre 2012
  44. 44. Resume •No more mess • Shorter files • No repetition (DRY)lunedì 5 novembre 2012
  45. 45. Resume •Its used worldwide by the best front-end developers • It would technically advance our company • It would empower your professional skillslunedì 5 novembre 2012
  46. 46. discussionlunedì 5 novembre 2012
  47. 47. Thats all! Thank you for your attention! @verlok | www.andreaverlicchi.eulunedì 5 novembre 2012

×