An intro to the features of Sass/SCSS

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