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
Tweet

More Decks by Stuart Robson

Other Decks in Programming

Transcript

  1. 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
  2. CSS and Sass commenting ‘CSS’ style comments are retained unless

    :compressed Unless you write - /*! comment */
  3. 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.
  4. @extend clones the attributes from a rule and adds them

    to another rule! be careful, with great power comes great responsibility
  5. %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’
  6. @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
  7. Sass 3.3 Sourcemaps - so you can see what you’re

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