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

1. Sass Central
Nervous Systems

2. What are they
made of?
interfaces:

3. 3

4. 4
ELECTRONS?
NEUTRONS?

5. 5

6. 6

7. 7

8. 8

9. Shared Styling
Concerns

10. 10
Shared Styling Concerns
Colors
Typography
Stacking (z-index)

11. 11
Shared Styling Concerns
Metrics (spacing)
Common Properties
Breakpoints/ Media

12. 12
Want
Consistency
Maintainability

13. Variables

14. 14

15. 15

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
Problems
Naming conflicts (globals!)
Invisible dependencies
No iteration or other “smarts”

18. 18
Have?
Consistency
Maintainability

19. 19
Components
Variables
$font-size $color-blue $default-spacing $more
button card sidebar type

20. 20
font-sizes
colors
defaults
button
card sidebar
type

21. Maps and
Functions

22. 22

23. 23

24. Colors

25. 25

26. 26

27. 27

28. 28

29. 29

30. 30

31. Defaults

32. 32

33. 33

34. 34

35. Z-Indexes

36. 36

37. 37

38. 38

39. 39

40. 40
Wow, so great!
Single point of entry
Debugging/ normalization
Iteration/ programmatic access
Reduced API footprint

41. 41
Work with me!
http://shopify.com/careers

42. Thank
You