Sass: An Introduction

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

Transcript

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
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
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
21. Webfonts with easy fallbacks
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
31. @mixins resusable code snippets! customisable but you can set default $arguments
32. @mixins Make Sass write the menial bits of CSS for you
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