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

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

4,141
-1

Published on

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

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

No Downloads
Views
Total Views
4,141
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
42
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

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 />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×