Keep Calm and Write Sass

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

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
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