Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Keep Calm and Write Sass

Kitty Giraudel
November 14, 2014

Keep Calm and Write Sass

Slides of my 18-minutes talk "Keep Calm and Write Sass" at dotCSS 2014 (November 14th).

Kitty Giraudel

November 14, 2014
Tweet

More Decks by Kitty Giraudel

Other Decks in Design

Transcript

  1. “Your CSS
    is a mess.”
    Jonathan Snook

    View full-size slide

  2. Your CSS
    is a mess.

    View full-size slide

  3. Broken from
    the start?

    View full-size slide

  4. Sass to
    the rescue!

    View full-size slide

  5. But... wait.

    View full-size slide

  6. It's not all
    bright and
    shiny.

    View full-size slide

  7. Complexity,
    maintainability,
    scary code...

    View full-size slide

  8. Don't
    over-{think|engineer}

    View full-size slide

  9. KISS
    Keep It
    Simple, Stupid!

    View full-size slide

  10. KYSS
    Keep Your
    Sass Simple
    Keep Sass Simple at SitePoint

    View full-size slide

  11. KYSSS
    Keep Your
    Sass Simple &
    Straightforward

    View full-size slide

  12. KYSSSS
    Keep Your
    Sass Simple, Smart &
    Straightforward...

    View full-size slide

  13. Write
    simple APIs

    View full-size slide

  14. .parent {
    @include _(
    10 8 6 4,
    $gutter: alpha omega omega default
    );
    }

    View full-size slide

  15. .parent {
    width: 100%;
    @include respond-to("desktop") {
    width: 75%;
    }
    }

    View full-size slide

  16. $color: map-get(
    map-get(
    map-get(
    $themes, "shopping"
    ), "colors"
    ), "secondary"
    );

    View full-size slide

  17. $color: theme-conf(
    "shopping", "colors", "secondary"
    );

    View full-size slide

  18. Beware of
    selector nesting
    Beware of selector nesting at SitePoint

    View full-size slide

  19. Don't do
    everything in
    Sass

    View full-size slide

  20. Rethinking
    Atwood's law

    View full-size slide

  21. Anything that can
    be written in Sass
    will eventually be
    written in Sass
    (probably by me)

    View full-size slide

  22. SassyJSON
    @include json-encode((
    "cats" : true,
    "answer" : 42
    ));
    // {"cats": true, "answer": 42}
    github.com/HugoGiraudel/SassyJSON

    View full-size slide

  23. SassySort
    $list: sort(
    "How" "cool" "Sass" "is?" 42
    );
    // 42 "cool" "How" "is?" "Sass"
    github.com/HugoGiraudel/SassySort

    View full-size slide

  24. SassyBitwise
    $value: bitwise(42 '&' 48);
    // 32
    github.com/HugoGiraudel/SassyBitwise

    View full-size slide

  25. Some things
    shouldn't
    be done

    View full-size slide

  26. Vendor
    prefixing?
    Maybe not.

    View full-size slide

  27. Autoprefixer
    Less code
    Up-to-date
    github.com/postcss/autoprefixer

    View full-size slide

  28. REM?
    Think twice.

    View full-size slide

  29. px_to_rem
    Less code
    Easier
    github.com/songawee/px_to_rem

    View full-size slide

  30. Clean
    your code

    View full-size slide

  31. .selector {
    color: blue;
    backgroud: url(unicorn.png);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
    position: relative }

    View full-size slide

  32. .selector {
    position: relative;
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
    color: blue;
    backgroud: url("unicorn.png");
    }

    View full-size slide

  33. cssguidelin.es

    View full-size slide

  34. scss-lint
    github.com/causes/scss-lint

    View full-size slide

  35. Document
    your code

    View full-size slide

  36. .selector {
    overflow: hidden;
    white-space: nowrap;
    margin: -.5em;
    z-index: 42;
    }

    View full-size slide

  37. /**
    * 1. Clear inner floats
    * 2. Force all items on same line
    * 3. Cancel items padding
    * 4. Above content, below modal
    */
    .selector {
    overflow: hidden; /* 1 */
    white-space: nowrap; /* 2 */
    margin: -.5em; /* 3 */
    z-index: 42; /* 4 */
    }

    View full-size slide

  38. Document
    your Sass

    View full-size slide

  39. SassDoc
    sassdoc.com

    View full-size slide

  40. /// Mixin to size an element
    /// @access public
    /// @param {Number} $width - Width
    /// @param {Number} $height - Height
    /// @example scss - Sizing an element
    /// .element {
    /// @include size(100%, 5em);
    /// }
    SassDoc

    View full-size slide

  41. Test
    your code

    View full-size slide

  42. True
    or
    BootCamp

    View full-size slide

  43. @include describe("A suite") {
    @include it("contains spec with expectation") {
    @include should(
    expect(2 + 2),
    to(be(4))
    );
    }
    }
    Bootcamp
    github.com/thejameskyle/bootcamp

    View full-size slide

  44. KISS - KYSS
    clean, test,
    document

    View full-size slide

  45. And everything
    will be fine.

    View full-size slide

  46. Thanks!
    @HugoGiraudel

    View full-size slide