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

Sass: a whistle stop tour

Sass: a whistle stop tour

A quick blast through what makes Sass an awesome extension of CSS that you should use no matter how marginally.

From a 5 minute, lightening talk at Milton Keynes Geek Night #8 on 12th March 2014


Stuart Robson

March 12, 2014

More Decks by Stuart Robson

Other Decks in Technology


  1. Sass: A Whistle Stop Tour Milton Keynes Geek Night #8

  2. Stuart Robson

  3. Freelance Front-End Developer

  4. RWDCalc.com

  5. Sassifaction

  6. SassnotSASS.com

  7. “If you see something, say something. Only you can prevent

  8. #Sasshole

  9. Sass Newsletter ! http://bit.ly/SassNews

  10. @sturobson

  11. None
  12. None
  13. None
  14. Syntactically awesome stylesheets a CSS extension language! created in 2006!

    frickin’ awesome
  15. None
  16. None
  17. If you put shit in, you get shit out* *

    your mileage may vary
  18. None
  19. Find your gateway drug

  20. $variables A way of storing something you need to use

    regularly in your stylesheets.
  21. The Facebook Blue #3B5998 Declared 261 times throughout all stylesheets!

    What if Zuck wanted a different shade of blue?
  22. Colour! Font Families! Margins! Paddings! Widths! Media Queries! Border Radius!

    Box Shadow! And so on! And so on
  23. Nesting

  24. Don’t Follow The DOM

  25. & The Powerful Ampersand

  26. None
  27. @mixins snippets of code! customisable with the ability to set

    defaults! let Sass write the menial bits of CSS for you
  28. None
  29. @content reprints code written (where declared) when compiling into CSS

  30. None
  31. Colour functions Make choosing and manipulating colours easy

  32. None
  33. I’ve only touched the surface

  34. I only mentioned one thing from Sass 3.3

  35. None
  36. Code examples are for effect

  37. Resources @SassNews - http://bit.ly/SassNews! @SassCSS - http://sass-lang.com/! @TheSassWay - http://thesassway.com/!

    @Sassmeister - http://sassmeister.com/! @StuRobson - http://www.alwaystwisted.com! Come to my workshop - http://bit.ly/SassWS
  38. Thank You twitter: @sturobson Milton Keynes Geek Night #8 13-03-14

    slides: http://bit.ly/SassIn5