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.

From Good to Great: 5 things you didn't know about Compass and Sass.

4,542 views

Published on

From Good to Great: 5 things you didn't know about Compass and Sass.

Published in: Technology
  • Be the first to comment

From Good to Great: 5 things you didn't know about Compass and Sass.

  1. 1. From Good <br />to Great.<br />5 things you didn't know you could do with Sass and Compass<br />
  2. 2. Hello.<br />
  3. 3.
  4. 4. #1: Smater Sprites<br />Sass helps you cut down on http requests.<br />
  5. 5. Basic Sprite Example<br />
  6. 6. Basic Sprite Example<br />+1 HTTP Request<br />
  7. 7. These can add up.<br />Weren't we using sprites to cut down on HTTP requests in the first place?<br />
  8. 8. inline-image function<br />
  9. 9. inline-image sprite Example<br />
  10. 10. inline-image sprite Example<br />
  11. 11. inline-image sprite Example<br />OH SHI-<br />
  12. 12. Over usage of this technique defeats the purpose.<br />
  13. 13. #2: Optimize for Some<br />Let your traffic patterns help you optimize your compiled css.<br />
  14. 14. Chrome<br />Firefox<br />
  15. 15. Chrome<br />KHTML<br />Firefox<br />
  16. 16. Standard CSS3 mixin<br />
  17. 17.
  18. 18.
  19. 19. Selective CSS3 Mixin<br />
  20. 20. WARNING<br />This might lead to over-optimization, but still pretty cool.<br />
  21. 21. #3: Coloring With Code<br />Sass functions that make color picking easier, directly in code.<br />
  22. 22. Sass Color Functions<br />
  23. 23. Sass Color Functions<br />
  24. 24. Sass Color Functions<br />color = hex | rgba | firebrick<br />
  25. 25. #4: @extend<br />Think Class Hierarchy, but for CSS!<br />
  26. 26. Standard Mixin Pattern<br />
  27. 27. Overweight.<br />is this CSS really what you'd do by hand?<br />
  28. 28. New @extend Pattern<br />
  29. 29. Less redundancy,<br />smaller output code.<br />This feels more like what you'd write out naturally.<br />
  30. 30. Cooler @extend Pattern<br />
  31. 31. @extend works with cascade, @include works around it.<br />Write classes naturally, let Sass manage selectors.<br />
  32. 32. #5: $ sass-convert<br />Move you existing stylebase over to Sass, with a simple command.<br />
  33. 33. $ sass-convert --help<br />
  34. 34. ...or, Just add an "s" to your file.<br />.scss<br />
  35. 35. Recommendations<br />Do NOT do this directly to your codebase. Copy it.<br />Check your file extensions.<br />Review the changes sass-convert made.<br />Try converting to SCSS(!)<br />
  36. 36. compass-style.org/docs<br />
  37. 37. compass-style.org/docs<br />its a beta.<br />
  38. 38. compass-style.org/docs<br />its a beta.<br />You should contribute.<br />
  39. 39. Thanks!<br />

×