Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SassConf Slides - Chris Sauve

531 views

Published on

The slides for Chris Sauve's SassConf talk, "Sass Central Nervous Systems"

Published in: Technology
  • Be the first to comment

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

×