Sass 101 - A Newb's Guide

Sass 101 - A Newb's Guide

Is Sass somewhat of a mystery to you? How does it work? Why do some say that it is better then CSS?

Cover all the basics. Nesting, parent/selector reference, variables, extends and mixins. Then progress into Sass Scripting like, operations, functions and directives.

Sass 101 - A Newb's Guide is more then just a deck, it's an interactive introduction to Sass. As an added bonus, download the PDF and each code side not only contains an awesome Sass example, but links to a long explanation to help you get started and a link to SassMeister so that you can interact with the code example.

See the corresponding code recipez:
http://coderecipez.roughdraft.io/

992bbe0cad45fc9f941a4717f9f01642?s=128

Dale Sande

April 29, 2013
Tweet

Transcript

  1. Let’s talk about Sass

  2. Let’s talk about Sass 101 a newb’s guide YAY! New

    Logo!
  3. A BRIEF HISTORY OF SASS • June 30th 2006 'Hampton

    Catlin' 1st commit for HAML • Dec 3rd, 2006 'Nathan Weizenbaum' began to commit to Sass • Aug 23, 2008 'Chris Eppstein' 1st Compass commit on Github • Aug 31, 2011 Rails 3.1 comes configured with Sass by default • October 10, 2011 the first ever ‘Seattle Sass Meetup’ happened
  4. INSTALLING SASS your options

  5. None
  6. IT’S INSTALLED NOW WHAT?

  7. Make a simple project directory. Inside create `/sass` and `/style`

    directories. Then create `/ sass/core.scss` Last, point the `sass --watch` command at these directories.
  8. WRITE SOME SASS

  9. None
  10. None
  11. None
  12. None
  13. - FIN -

  14. - J/K -

  15. LET’S TALK ABOUT SASS

  16. Nesting

  17. Parent selector reference

  18. Parent selector reference

  19. Parent selector reference

  20. Selector bubble up

  21. Variables } vars

  22. Variables } vars No Scoped Variables

  23. Global Variables are not scoped

  24. Selector inheritance w/@extend } }

  25. Selector inheritance w/silent @extend }

  26. Mixins

  27. Mixins w/arguments

  28. Mixins w/default arguments

  29. Mixins w/global default arguments

  30. Mixins w/global default arguments Vars in mixins are scoped

  31. Mixins w/expressions in Selectors and Property Names (interpolation)

  32. SASS SCRIPTING

  33. Operations

  34. Operation inside a function

  35. Color operations

  36. Operations w/directive

  37. Operations w/directive

  38. Operations: range of numbers

  39. Operations: range of numbers w/silent placeholders

  40. Operations: list of values

  41. Operations Advanced: list of values

  42. LET’S WRAP THIS UP!

  43. ‘sass40’ 40% off early access book http://www.manning.com/netherland/ http://pragprog.com/book/ pg_sass/pragmatic-guide-to-sass

  44. None
  45. None
  46. None
  47. None
  48. None
  49. None