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

Sass: An Introduction

Sass: An Introduction

These are the slides I used in my workshop at The Founder Hub on the 8th of January 2014


Stuart Robson

January 08, 2014

More Decks by Stuart Robson

Other Decks in Programming


  1. Sass: An Introduction Founder’s Hub, Cardiff. January 2014

  2. About Me. Stuart Robson ! front-end developer ! rwdcalc.com SassnotSASS.com

    ! Sassifaction
  3. A small caveat I don’t know _everything_

  4. What is Sass?

  5. Syntactically Awesome Stylesheets A pre-processor making CSS fun again.! Hampton

    Catlin created it in 2006 to work along side HAML! Nathan Weizenbaum began to assist and develop it late 2006! Chris Epstein committed the first version of Compass in Autumn 2008
  6. Alternatives to Sass

  7. The Tale of Two Syntaxes

  8. Sass

  9. SCSS

  10. Installing Sass… PrePros

  11. None
  12. Your First Sass file

  13. CSS and Sass commenting ‘CSS’ style comments are retained unless

    :compressed Unless you write - /*! comment */
  14. Sass > CSS compile options :nested :expanded :compact :compressed

  15. @import In CSS In Sass

  16. None
  17. So, what can Sass do?

  18. $variables what could we use it for?

  19. The Facebook Blue Declared 261 times throughout all stylesheets! Imagine

    if Zuck wanted to change the shade? #3B5998
  20. None
  21. Webfonts with easy fallbacks

  22. None
  23. Border Radius Margin Media Queries Border Padding

  24. Nesting

  25. Don’t follow DOM

  26. 3 levels deep When nesting your Sass, don’t go any

    further than 3 levels deep helps performance (although negligible).! helps sanity when looking at your code.
  27. Combining Selectors

  28. The Powerful Ampersand

  29. The Parent Selector using the &(ampersand) reference the parent selector

  30. None
  31. @mixins resusable code snippets! customisable but you can set default

  32. @mixins Make Sass write the menial bits of CSS for

  33. @extend clones the attributes from a rule and adds them

    to another rule! be careful, with great power comes great responsibility
  34. @extends

  35. Using @extend badly

  36. %placeholders they can be @extend-ed just like existing classes or

    IDs.! the @extend-ed %placeholder will be generated.! the actual %placeholder selector won’t be generated. or ‘silent classes’
  37. %placeholders or ‘silent classes’

  38. Functions Math Operators +, -, *, /, and %

  39. Functions Number Functions

  40. Functions Control Directives @if @for @each @while

  41. Functions @for loop

  42. Functions @each loop

  43. Colour

  44. @content allow you to pass anything into a mixin! I

    mainly use it for media queries! could be added to the bottom of any mixin, 
 just in case
  45. @content

  46. @content & media queries

  47. @content, media queries and Internet Explorer

  48. A CSS authoring framework

  49. What’s in Compass CSS3 mixins! typographic rhythm! sprite generation! loads

    of helpers
  50. Lots of Sass mixins grids typographical ! stylesheet

  51. Sass 3.3

  52. Sass 3.3 Sourcemaps - so you can see what you’re

    editing in devtools.! Improved & support! Maps support! @at-root rule