Your SlideShare is downloading. ×
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,000

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

×