Three Years of Purging Sass

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.

729edf889ced7863dedba95452272bca?s=128

Hugo Giraudel

August 27, 2015
Tweet

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

  14. None
  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.”

  28. None
  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