Sass Central Nervous Systems

What are they made of?

interfaces:

3

4

ELECTRONS? NEUTRONS?

5

6

7

8

Shared Styling Concerns

10

Shared Styling Concerns

Colors Typography

Stacking (z-index)

11

Shared Styling Concerns

Metrics (spacing) Common Properties Breakpoints/ Media

12

Want

Consistency

Maintainability

Variables

14

15

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; $header-height: something;

17

Problems

Naming conflicts (globals!) Invisible dependencies

No iteration or other “smarts”

18

Have?

Consistency

Maintainability

19

Components

Variables

$font-size $color-blue $default-spacing $more

button card sidebar type

20

font-sizes

colors

defaults

button

card sidebar

type

Maps and Functions

22

23

Colors

25

26

27

28

29

30

Defaults

32

33

34

Z-Indexes

36

37

38

39

40

Wow, so great!

Single point of entry Debugging/ normalization

Iteration/ programmatic access Reduced API footprint

41

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

Thank You