Sass: An Introduction

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

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

    $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