sass.jade

include ./shared/slide_mixins

+slideGroup
  +bigTitleSlide("Sass")
    :markdown
      "Sass is the most mature, stable, and powerful professional grade CSS extension language in the world."

  +littleTitleSlide("Trivial Example")
    include:markdown code/sass.md

    +speakerNotes
      :markdown
        Wow it looks the same unlike Haml. That is the real power of SCSS
        as a super-set of CSS any and all CSS is already SCSS

  +littleTitleSlide("Less Trivial Example")
    include:markdown code/realsass.md

    +speakerNotes
      :markdown
        Sass adds a lot of features but in the end it turns into CSS again. Sass does let us also
        write extensible modules that can act a little like partials in the scope of CSS

  +littleTitleSlide("Nesting")
    include:markdown code/deeply_nested.md

    +speakerNotes
      :markdown
        Nesting is kind of a theme with computers because the two primary activities that programming languages
        let us exercise is abstraction and encapsulation. CSS handles nesting by creating multiple statements of
        selector inheritance. To be noted in our previous non trivial example.

  +littleTitleSlide("the & symbol and what does it do")
    :markdown
      It converts a nested selector to join the previous selector on the same element as opposed to being on a child
      element

  +littleTitleSlide("& Example")
    include:markdown code/the_ampersand.md

    +speakerNotes
      :markdown
        This definitely needs a HTML/CSS Example on the whiteboard where there is more space

  +littleTitleSlide("@import")
    :markdown
      An extension of CSS @Import to combine multiple files into a single stylesheet at compile time.

    +speakerNotes
      :markdown
        No longer do you need to have multiple html link elements to help organize your stylesheets. This is an important concept to keep styles
        short and on topic. Navigation can have its own sheet so its easier to encapsulate styles.

  +littleTitleSlide("@include")
    :markdown
      __Inlines__ style templates called __Mixins__(like a function) written by yourself or provided by frameworks like __Bourbon__

  +littleTitleSlide("@include example")
    include:markdown code/sass_mixins.md

  +bigTitleSlide("There is sooo much more")
    :markdown
      A story for another day

    +speakerNotes
      :markdown
        Sass like CSS is best experienced one at a time

  +bigTitleSlide("MORE INFO")
    :markdown
      [Guide](http://sass-lang.com/guide)

  +bigTitleSlide("Tools")
    :markdown
      [Sass Meister](http://sassmeister.com)