$30 off During Our Annual Pro Sale. View Details »

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.

Kitty Giraudel

August 27, 2015
Tweet

More Decks by Kitty Giraudel

Other Decks in Programming

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
    [email protected]
    www.edenspiekermann.com

    View Slide