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
   

   View Slide

2. I’m Hugo.
   I’m 23.
   I’m a front-end dev at
   Edenspiekermann, in Berlin.
   I like Sass and burgers.
   

   View Slide

3. 3+ years of Sass.
   30+ projects.
   300+ pull-requests.
   Tl;dr: we can do better.
   

   View Slide

4. Sass units
   Sass lists
   null value
   code quality
   Sass not SASS
   

   View Slide

5. Sass units
   

   View Slide

6. Same as in
   real life
   

   View Slide

7. Adding a unit
   

   View Slide

8. 1 cat * 3

   = 3 cats
   

   View Slide

9. 3 + cat

   = “3cat”
   

   View Slide

10. $foo: 42 + px
    

    View Slide

11. $foo: 42#{px}
    

    View Slide

12. $foo * 2
    

    View Slide

13. 42px is not a
    number
    

    View Slide

14. View Slide

15. $foo: 42 * 1px
    

    View Slide

16. $foo: 42 + 0px
    

    View Slide

17. $foo * 2
    = 84px
    

    View Slide

18. Removing a
    unit
    

    View Slide

19. 3 cats / 1 cat

    = 3
    

    View Slide

20. str-slice
    

    View Slide

21. $n /

    ($n * 0 + 1)
    

    View Slide

22. $foo / 1px
    = 84
    

    View Slide

23. Square units
    

    View Slide

24. m * m = m²
    

    View Slide

25. px * px = px²
    

    View Slide

26. 42px * 2px
    

    View Slide

27. “84px*px isn't a
    valid CSS value.”
    

    View Slide

28. View Slide

29. 42px * 2
    = 84px
    

    View Slide

30. 42 * 2px
    = 84px
    

    View Slide

31. 42 * 2 * 1px
    = 84px
    

    View Slide

32. Sass lists
    

    View Slide

33. Already in
    CSS
    

    View Slide

34. font-family,
    padding…
    

    View Slide

35. Commas or
    spaces
    

    View Slide

36. “‘Helvetica’,
    ‘Arial’, sans-serif”
    

    View Slide

37. (‘Helvetica’,

    ‘Arial’, sans-serif)
    

    View Slide

38. $font: $font +
    sans-serif
    

    View Slide

39. $font: append(

    $font, sans-serif)
    

    View Slide

40. Use them,
    not strings
    

    View Slide

41. null value
    

    View Slide

42. “empty”
    

    View Slide

43. nil
    

    View Slide

44. undefined
    

    View Slide

45. NULL
    

    View Slide

46. false
    

    View Slide

47. No output
    

    View Slide

48. $foo: null
    color: $foo
    

    View Slide

49. Code quality
    

    View Slide

50. Readable

    calculations
    

    View Slide

51. $i*2/3+.5
    

    View Slide

52. ($i * 2) / 3 + 0.5
    

    View Slide

53. Hyphenated
    variables
    

    View Slide

54. $baseFontSize
    

    View Slide

55. $base-font-size
    

    View Slide

56. “-” == “_”
    

    View Slide

57. map-get ==
    map_get
    

    View Slide

58. map-get

    map_get
    

    View Slide

59. Keep it cool
    with nesting
    

    View Slide

60. It’s not
    Russian Dolls.
    

    View Slide

61. nav {
    …
    ul {
    …
    li {
    …
    a {
    …
    &:hover {
    …
    }
    }
    }
    }
    }
    Nope.
    

    View Slide

62. Pyramid

    of doom
    

    View Slide

63. nav { … }
    nav ul { … }
    nav li { … }
    nav a { … }
    nav a:hover { … }
    

    View Slide

64. Wall of
    consistency
    

    View Slide

65. Sass-
    guidelin.es
    

    View Slide

66. Sass not SASS
    

    View Slide

67. It’s a
    backronym
    

    View Slide

68. Don’t yell it
    

    View Slide

69. It’s “Sass”
    

    View Slide

70. Let’s sum up
    

    View Slide

71. Sass units work
    as in real life
    

    View Slide

72. Lists can be
    used in CSS
    

    View Slide

73. The null value
    means “empty”
    

    View Slide

74. Heavy nesting

    is harmful
    

    View Slide

75. Code guidelines
    are vital
    

    View Slide

76. It’s Sass
    not SASS
    

    View Slide

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
    

    View Slide