Keep Calm and Write Sass

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