Three Years of Purging Sass

Writing Sass is easy. Well, kind of. In fact, the average quality of open-sourced Sass code is quite low. I care. That's why I have been contributing to dozen of repositories and projects over the last 3 years to level up the Sass game on GitHub.

This talk is a summary of all the common mistakes, poor practices and bad design patterns I have met along the journey. Hopefully, you will have a deeper understanding of the language after this presentation, able to avoid the usual pitfalls from writing Sass code.

Transcript

1. berlin amsterdam san francisco singapore stuttgart edenspiekermann_ Three years
 of purging Sass Frontend Conference (Zurich) August 27th, 2015
2. I’m Hugo. I’m 23. I’m a front-end dev at Edenspiekermann, in Berlin. I like Sass and burgers.
3. 3+ years of Sass. 30+ projects. 300+ pull-requests. Tl;dr: we can do better.
4. Sass units Sass lists null value code quality Sass not SASS
5. Sass units
6. Same as in real life
7. Adding a unit
8. 1 cat * 3
 = 3 cats
9. 3 + cat
 = “3cat”
10. $foo: 42 + px
11. $foo: 42#{px}
12. $foo * 2
13. 42px is not a number
15. $foo: 42 * 1px
16. $foo: 42 + 0px
17. $foo * 2 = 84px
18. Removing a unit
19. 3 cats / 1 cat
 = 3
20. str-slice
21. $n /
 ($n * 0 + 1)
22. $foo / 1px = 84
23. Square units
24. m * m = m²
25. px * px = px²
26. 42px * 2px
27. “84px*px isn't a valid CSS value.”
29. 42px * 2 = 84px
30. 42 * 2px = 84px
31. 42 * 2 * 1px = 84px
32. Sass lists
33. Already in CSS
34. font-family, padding…
35. Commas or spaces
36. “‘Helvetica’, ‘Arial’, sans-serif”
37. (‘Helvetica’,
 ‘Arial’, sans-serif)
38. $font: $font + sans-serif
39. $font: append(
 $font, sans-serif)
40. Use them, not strings
41. null value
42. “empty”
43. nil
44. undefined
45. NULL
46. false
47. No output
48. $foo: null color: $foo
49. Code quality
50. Readable
 calculations
51. $i*2/3+.5
52. ($i * 2) / 3 + 0.5
53. Hyphenated variables
54. $baseFontSize
55. $base-font-size
56. “-” == “_”
57. map-get == map_get
58. map-get
 map_get
59. Keep it cool with nesting
60. It’s not Russian Dolls.
61. nav { … ul { … li { … a { … &:hover { … } } } } } Nope.
62. Pyramid
 of doom
63. nav { … } nav ul { … } nav li { … } nav a { … } nav a:hover { … }
64. Wall of consistency
65. Sass- guidelin.es
66. Sass not SASS
67. It’s a backronym
68. Don’t yell it
69. It’s “Sass”
70. Let’s sum up
71. Sass units work as in real life
72. Lists can be used in CSS
73. The null value means “empty”
74. Heavy nesting
 is harmful
75. Code guidelines are vital
76. It’s Sass not SASS
77. berlin amsterdam san francisco singapore stuttgart edenspiekermann_ Thank you. Any question?
 -> @HugoGiraudel Hugo Giraudel, Front-end Developer @HugoGiraudel h.giraudel@de.edenspiekermann.com www.edenspiekermann.com