Your SlideShare is downloading. ×
0
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
From Good to Great: 5 things you didn't know about Compass and Sass.
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

4,048

Published on

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

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

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×