Pro Yearly is on sale from $80 to $50! »

Keep Calm and Write Sass

729edf889ced7863dedba95452272bca?s=47 Hugo 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).

729edf889ced7863dedba95452272bca?s=128

Hugo Giraudel

November 14, 2014
Tweet

Transcript

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

  3. Your CSS is a mess.

  4. Broken from the start?

  5. Sass to the rescue!

  6. But... wait.

  7. It's not all bright and shiny.

  8. Complexity, maintainability, scary code...

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

  10. KISS Keep It Simple, Stupid!

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

  12. KYSSS Keep Your Sass Simple & Straightforward

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

  14. Write simple APIs

  15. .parent { @include _( 10 8 6 4, $gutter: alpha

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

    }
  17. $color: map-get( map-get( map-get( $themes, "shopping" ), "colors" ), "secondary"

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

  19. Beware of selector nesting Beware of selector nesting at SitePoint

  20. Don't do everything in Sass

  21. Rethinking Atwood's law

  22. Anything that can be written in Sass will eventually be

    written in Sass (probably by me)
  23. SassyJSON @include json-encode(( "cats" : true, "answer" : 42 ));

    // {"cats": true, "answer": 42} github.com/HugoGiraudel/SassyJSON
  24. SassySort $list: sort( "How" "cool" "Sass" "is?" 42 ); //

    42 "cool" "How" "is?" "Sass" github.com/HugoGiraudel/SassySort
  25. SassyBitwise $value: bitwise(42 '&' 48); // 32 github.com/HugoGiraudel/SassyBitwise

  26. Some things shouldn't be done

  27. Vendor prefixing? Maybe not.

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

  29. REM? Think twice.

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

  31. None
  32. Clean your code

  33. .selector { color: blue; backgroud: url(unicorn.png); -webkit-transform: rotate(15deg); transform: rotate(15deg);

    position: relative }
  34. .selector { position: relative; -webkit-transform: rotate(15deg); transform: rotate(15deg); color: blue;

    backgroud: url("unicorn.png"); }
  35. cssguidelin.es

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

  37. Document your code

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

    }
  39. /** * 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 */ }
  40. Document your Sass

  41. SassDoc sassdoc.com

  42. /// 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
  43. SassDoc

  44. Test your code

  45. True or BootCamp

  46. @include describe("A suite") { @include it("contains spec with expectation") {

    @include should( expect(2 + 2), to(be(4)) ); } } Bootcamp github.com/thejameskyle/bootcamp
  47. KISS - KYSS clean, test, document

  48. And everything will be fine.

  49. Thanks! @HugoGiraudel