This document introduces Sass as a solution for the pain points of CSS like lack of variables, nesting, and repetition. It highlights Sass' features like variables, nesting, mixins, extends, and color/math functions that make front-end development easier. The document provides tips for using Sass such as limiting nesting to 2 levels, using imports to avoid extra HTTP requests, separating mixins into a library, and thinking in modules to build a Sass partial library. It recommends learning more about Sass through documentation and other resources and introduces related preprocessing tools like LESS and Stylus.

1. FRONT END
BADASSERY
WITH SASS
Jessica Eldredge
RailsGirls DC 2012

2. “I don’t like the green. Can we change it?”

3. CSS IS A PAIN

4. it lacks VARIABLES
it lacks FUNCTIONS
it’s LONG
it’s REPETITIVE

5. ENTER SASS
a front end developer’s dream

6. VARIABLES

7. NESTING

8. MIXINS

9. EXTEND

10. COLOR FUNCTIONS

11. MATH

12. SASS OR SCSS?

13. TWO DIFFERENT SYNTAXES

14. HELPFUL TIPS

15. LIMIT YOUR NESTING
no more than 2 levels

16. USE @IMPORT
no extra HTTP requests!

17. SEPARATE MIXINS
keep a mixin library

18. USE PARTIALS
think in terms of
MODULES
build up your
LIBRARY

19. NEXT STEPS

20. FRAMEWORKS, LIBRARIES
Compass
compass-style.org
Bourbon
thoughtbot.com/bourbon

21. LEARN MORE SCSS
Sass Documentation
thesassway.com
Chris Eppstein
@chriseppstein
github.com/chriseppstein

22. OTHER PREPROCESSORS
LESS
lesscss.org
Stylus
learnboost.github.com/stylus

23. GO FORTH, BADASS

24. KEEP IN TOUCH!
jessica.avison@gmail.com
@jessabean
github.com/jessabean