Sass and Compass can be used to: 1. Create smarter sprites to reduce HTTP requests by using Sass functions like inline-image. 2. Optimize CSS for specific browsers using selective CSS3 mixins to target only needed properties. 3. Use Sass color functions to pick and manipulate colors directly in code. 4. Take advantage of the @extend feature to write CSS in a more object-oriented way and reduce code redundancy. 5. Convert existing CSS to Sass syntax using the sass-convert command.

1. From Good to Great. 5 things you didn't know you could do with Sass and Compass

2. Hello.

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

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!