Scrivere CSS agile con Compass/SASS + debug facile
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Scrivere CSS agile con Compass/SASS + debug facile

on

  • 904 views

 

Statistics

Views

Total Views
904
Views on SlideShare
904
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Scrivere CSS agile con Compass/SASS + debug facile Presentation Transcript

  • 1. SASS & COMPASS CSS with less STRESSlunedì 5 novembre 2012
  • 2. CSS can become messylunedì 5 novembre 2012
  • 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. CSS can become messy • Not a unique author • Not a unique coding stylelunedì 5 novembre 2012
  • 5. CSS can become looonglunedì 5 novembre 2012
  • 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. CSS can be repetitivelunedì 5 novembre 2012
  • 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. CSS is not a complete languagelunedì 5 novembre 2012
  • 10. CSS is not a complete language • No variables • No extending • No math • Few functions (rgb, rgba, ...)lunedì 5 novembre 2012
  • 11. What if all this could CHANGE?lunedì 5 novembre 2012
  • 12. What if we could use... NESTING?lunedì 5 novembre 2012
  • 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. What if we could use... VARIABLES?lunedì 5 novembre 2012
  • 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. What if we could use... FUNCTIONS?lunedì 5 novembre 2012
  • 17. FUNCTIONS button { button { background: #CE4DD6; background: $mainColor; } } button:hover { button:hover { background: #D76DDE; background: saturate($mainColor, 10%); } }lunedì 5 novembre 2012
  • 18. What if we could do... some MATH?lunedì 5 novembre 2012
  • 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. What if we could use... PARTIALS?lunedì 5 novembre 2012
  • 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. 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. lunedì 5 novembre 2012
  • 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. SASS 3 does all this (and lots more)lunedì 5 novembre 2012
  • 26. It also allows to do more powerful stuff (if you love power & complexity) using Mixinslunedì 5 novembre 2012
  • 27. It also removes comments we dont want to publish i.g. "fuck IE"lunedì 5 novembre 2012
  • 28. It also allows to choose the output CSS style, including compressedlunedì 5 novembre 2012
  • 29. So why arent we using it (yet)?lunedì 5 novembre 2012
  • 30. Because its hard to debug?lunedì 5 novembre 2012
  • 31. lunedì 5 novembre 2012
  • 32. COMPASS Compass is an open-source CSS Authoring Framework. Compass uses SASS.lunedì 5 novembre 2012
  • 33. COMPASS extends SASS + gives you some interesting featureslunedì 5 novembre 2012
  • 34. 1. ITS EASY TO DEBUG!lunedì 5 novembre 2012
  • 35. 1. ITS EASY TO DEBUG! Click on definitionlunedì 5 novembre 2012
  • 36. 1. ITS EASY TO DEBUG! Get the source file and line numberlunedì 5 novembre 2012
  • 37. (claps)lunedì 5 novembre 2012
  • 38. 2. ITS LOADED WITH LOTS OF HELPERS & PATTERNSlunedì 5 novembre 2012
  • 39. 2. ITS LOADED WITH LOTS OF HELPERS & PATTERNS CSS3,Typography, Utilities, Reset, Grids, Clearfix, Sticky Footer, and morelunedì 5 novembre 2012
  • 40. 3. IT MAKES VERY EASY TO WORK with SPRITESlunedì 5 novembre 2012
  • 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. demolunedì 5 novembre 2012
  • 43. Resume •Nesting • Variables • Functions • Math • Partialslunedì 5 novembre 2012
  • 44. Resume •No more mess • Shorter files • No repetition (DRY)lunedì 5 novembre 2012
  • 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. discussionlunedì 5 novembre 2012
  • 47. Thats all! Thank you for your attention! @verlok | www.andreaverlicchi.eulunedì 5 novembre 2012