Front End Badassery with Sass

454 views
365 views

Published on

An intro to the features of Sass/SCSS

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
454
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Front End Badassery with Sass

  1. 1. FRONT ENDBADASSERY WITH SASS Jessica Eldredge RailsGirls DC 2012
  2. 2. “I don’t like the green. Can we change it?”
  3. 3. CSS IS A PAIN
  4. 4. it lacks VARIABLESit lacks FUNCTIONS it’s LONG it’s REPETITIVE
  5. 5. ENTER SASSa front end developer’s dream
  6. 6. VARIABLES
  7. 7. NESTING
  8. 8. MIXINS
  9. 9. EXTEND
  10. 10. COLOR FUNCTIONS
  11. 11. MATH
  12. 12. SASS OR SCSS?
  13. 13. TWO DIFFERENT SYNTAXES
  14. 14. HELPFUL TIPS
  15. 15. LIMIT YOUR NESTING no more than 2 levels
  16. 16. USE @IMPORTno extra HTTP requests!
  17. 17. SEPARATE MIXINS keep a mixin library
  18. 18. USE PARTIALS think in terms of MODULES build up your LIBRARY
  19. 19. NEXT STEPS
  20. 20. FRAMEWORKS, LIBRARIES Compass compass-style.org Bourbon thoughtbot.com/bourbon
  21. 21. LEARN MORE SCSSSass Documentation thesassway.com Chris Eppstein @chriseppsteingithub.com/chriseppstein
  22. 22. OTHER PREPROCESSORS LESS lesscss.org Stylus learnboost.github.com/stylus
  23. 23. GO FORTH, BADASS
  24. 24. KEEP IN TOUCH!jessica.avison@gmail.com @jessabean github.com/jessabean

×