Successfully reported this slideshow.

SassConf Slides - Chris Sauve

4

Share

1 of 42
1 of 42

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

SassConf Slides - Chris Sauve

  1. 1. Sass Central Nervous Systems
  2. 2. What are they made of? interfaces:
  3. 3. 3
  4. 4. 4 ELECTRONS? NEUTRONS?
  5. 5. 5
  6. 6. 6
  7. 7. 7
  8. 8. 8
  9. 9. Shared Styling Concerns
  10. 10. 10 Shared Styling Concerns Colors Typography Stacking (z-index)
  11. 11. 11 Shared Styling Concerns Metrics (spacing) Common Properties Breakpoints/ Media
  12. 12. 12 Want Consistency Maintainability
  13. 13. Variables
  14. 14. 14
  15. 15. 15
  16. 16. 16 $color-blue: something; $color-green: something; $color-black: something; $color-white: something; $color-gray-lightest: something; $color-gray-lighter: something; $color-gray-light: something; $color-gray: something; $turboBarHeight: something; $turboBarContentHeight: something; $headerHeight: something; $barBackground: something; $contentBackground: something; $datepicker-width: something; $infinity-sign-width: something;
  17. 17. 17 Problems Naming conflicts (globals!) Invisible dependencies No iteration or other “smarts”
  18. 18. 18 Have? Consistency Maintainability
  19. 19. 19 Components Variables $font-size $color-blue $default-spacing $more button card sidebar type
  20. 20. 20 font-sizes colors defaults button card sidebar type
  21. 21. Maps and Functions
  22. 22. 22
  23. 23. 23
  24. 24. Colors
  25. 25. 25
  26. 26. 26
  27. 27. 27
  28. 28. 28
  29. 29. 29
  30. 30. 30
  31. 31. Defaults
  32. 32. 32
  33. 33. 33
  34. 34. 34
  35. 35. Z-Indexes
  36. 36. 36
  37. 37. 37
  38. 38. 38
  39. 39. 39
  40. 40. 40 Wow, so great! Single point of entry Debugging/ normalization Iteration/ programmatic access Reduced API footprint
  41. 41. 41 Work with me! http://shopify.com/careers
  42. 42. Thank You

×