Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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...
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
Prochain SlideShare
Chargement dans…5
×

SassConf Slides - Chris Sauve

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

  • Soyez le premier à commenter

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

×