Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WordCamp Baltimore - Let's Get Sassy!

Brad Parbs
September 21, 2013

WordCamp Baltimore - Let's Get Sassy!

yo #wcbalt it was awesome

Brad Parbs

September 21, 2013
Tweet

More Decks by Brad Parbs

Other Decks in Technology

Transcript

  1. Let’s get SASSy
    #wcbalt

    View full-size slide

  2. #wcbalt
    BO
    N
    U
    S
    SLID
    E

    View full-size slide

  3. #wcbalt
    Go to @brennenbyrne’s talk
    and just keep yelling about how
    zoidberg is a good password
    BO
    N
    U
    S
    SLID
    E

    View full-size slide

  4. #wcpvd
    I’m Brad Parbs.
    Created Wolf, hook_s & wpWizard
    Core Contributor in 3.5 & 3.6
    Run Snow Day Group, (snowday.io)
    ♥ WordPress, Startups, and Code
    Plugin and Theme author/developer
    @BradParbs
    brad.parbs.me
    #wcbalt

    View full-size slide

  5. #wcpvd
    More Fun Facts
    Going to be on a pirate ship later WHAT
    Cats cats cats cats
    No longer have a beard :(
    I love GIFs
    No memes in this talk at all
    @BradParbs
    brad.parbs.me
    #wcbalt

    View full-size slide

  6. What is SASS?
    “Sass is a meta-language on top of CSS ... with
    more power than flat CSS allows. Sass both
    provides a simpler, more elegant syntax for CSS
    and implements various features that are useful for
    creating manageable stylesheets.”
    sass-lang.org
    #wcbalt

    View full-size slide

  7. What is SASS?
    Write less, do more.
    #wcbalt

    View full-size slide

  8. What is SASS?
    SASS is awesome.
    #wcbalt

    View full-size slide

  9. Why SASS over LESS?
    Compass - “drop-in” bits of SASS
    @extend() - allows for cleaner HTML
    Easily Embedding Media Queries
    #wcmke
    #wcbalt

    View full-size slide

  10. Installation
    Prepros
    #wcmke
    #wcbalt

    View full-size slide

  11. Should I just use a Javascript compiler?
    #wcbalt
    Installation

    View full-size slide

  12. Now we write some SASS...
    #wcmke
    #wcbalt

    View full-size slide

  13. And it becomes CSS!
    #wcmke
    #wcbalt

    View full-size slide

  14. Any Questions?
    #wcbalt

    View full-size slide

  15. Let’s get SASSy
    #wcbalt

    View full-size slide

  16. Two Flavors
    .scss .sass
    #wcgr
    #wcbalt

    View full-size slide

  17. Two Flavors
    .scss .sass
    More similar to CSS
    Easier to jump into from CSS
    Probably where you want to start
    Less keystrokes
    Cleaner files
    #wcgr
    #wcbalt

    View full-size slide

  18. Nesting
    #wcgr
    #wcbalt

    View full-size slide

  19. Nesting
    Nesting
    #wcgr
    #wcbalt

    View full-size slide

  20. Parent Selector Reference
    #wcgr
    #wcbalt

    View full-size slide

  21. Parent Selector Reference
    #wcgr
    #wcbalt

    View full-size slide

  22. Selector Bubble Up
    Perfect for using Media Queries to build responsively.
    #wcgr
    #wcbalt

    View full-size slide

  23. Partials / File Structure
    http://b.parbs.me/PP2n
    http://b.parbs.me/POcZ
    #wcgr
    #wcbalt

    View full-size slide

  24. Variables
    #wcgr
    #wcbalt

    View full-size slide

  25. @extend()
    #wcmke
    #wcgr
    #wcbalt

    View full-size slide

  26. @extend()
    #wcgr
    #wcbalt

    View full-size slide

  27. Silent @extend
    #wcgr
    #wcbalt

    View full-size slide

  28. Mixins
    #wcbalt

    View full-size slide

  29. Mixins
    #wcbalt

    View full-size slide

  30. Mixins with Arguments
    w/
    #wcbalt

    View full-size slide

  31. Mixins with Arguments
    w/
    #wcbalt

    View full-size slide

  32. Mixins with Default Arguments
    #wcbalt

    View full-size slide

  33. Mixins
    #wcbalt

    View full-size slide

  34. http://bourbon.io/
    #wcbalt

    View full-size slide

  35. Mixins
    Appearance
    Background Clip
    Background Origin
    Background Size
    Border Radius
    Box
    Box Shadow
    Box Sizing
    CSS Regions
    CSS3 Pie
    Columns
    Filter
    Font Face
    http://compass-style.org
    #wcbalt

    View full-size slide

  36. Mixins
    #wcbalt

    View full-size slide

  37. Operations
    #wcbalt

    View full-size slide

  38. Operations within functions
    #wcbalt

    View full-size slide

  39. Color Functions
    #wcbalt

    View full-size slide

  40. Color Functions
    examples from: http://b.parbs.me/PSRH
    $base-color: #AD141E;
    darken( $base-color, 10% );
    lighten( $base-color, 10% );
    saturate( $base-color, 20% );
    desaturate( $base-color, 20% );
    adjust-hue( $base-color, 20% );
    #wcbalt

    View full-size slide

  41. Color Functions
    #wcbalt

    View full-size slide

  42. Color Functions
    #wcbalt

    View full-size slide

  43. Color Functions
    #wcbalt

    View full-size slide

  44. Color Operations
    http://sassme.arc90.com/
    #wcbalt

    View full-size slide

  45. Operations with Directive
    #wcbalt

    View full-size slide

  46. Operations - Range of Numbers
    #wcgr
    #wcbalt

    View full-size slide

  47. Operations - Range of Numbers with Silent placeholders
    #wcgr
    #wcbalt

    View full-size slide

  48. Operations - List of Values
    #wcgr
    #wcbalt

    View full-size slide

  49. config.rb
    #wcgr
    #wcbalt

    View full-size slide

  50. config.rb
    #wcgr
    #wcbalt

    View full-size slide

  51. Let’s install Twitter Bootstrap
    Without SASS:
    1.Download zip file.
    2. Copy+Paste into stylesheet
    or: @import another CSS file
    or: another CSS file
    3.Redo all of this when there’s an
    update.
    4.Ugh this sucks, I’ll just use
    BootstrapWP.
    #wcgr
    #wcbalt

    View full-size slide

  52. Let’s install Twitter Bootstrap
    With SASS:
    1.$ gem install compass-bootstrap
    (only have to ever do this once)
    2. Add require “compass-
    bootstrap” to config.rb.
    #wcgr
    #wcbalt

    View full-size slide

  53. Let’s install Twitter Bootstrap
    https://github.com/hecbuma/compass-bootstrap
    #wcgr
    #wcbalt

    View full-size slide

  54. config.rb
    #wcgr
    #wcbalt

    View full-size slide

  55. config.rb
    #wcgr
    #wcbalt

    View full-size slide

  56. Processing Modes
    :nested
    :expanded
    :compact
    :compressed
    #wcgr
    #wcbalt

    View full-size slide

  57. config.rb
    #wcgr
    #wcbalt

    View full-size slide

  58. Building a WP Theme
    • We want only one stylesheet
    • Our SASS folder should live
    independently
    • config.rb in the root, so we can use
    Codekit to optimize images & JS
    https://github.com/bradp/Wolf
    #wcgr
    #wcbalt

    View full-size slide

  59. Building a WP Theme
    #wcgr
    #wcbalt

    View full-size slide

  60. Tools
    http://sassmeister.com/ http://codepen.io/
    http://thesassway.com/
    #wcgr
    #wcbalt

    View full-size slide

  61. Resources
    http://alistapart.com/article/getting-started-with-sass
    http://css-tricks.com/redesigning-with-sass/
    https://speakerdeck.com/anotheruiguy/clean-out-your-sass-junk-drawer
    https://speakerdeck.com/irishstu/an-introduction-to-sassy-css
    http://sass-lang.com/
    #wcgr
    #wcbalt

    View full-size slide

  62. I’m Brad Parbs.
    @BradParbs
    brad.parbs.me
    http://b.parbs.me/
    Slides:
    #wcgr
    #wcbalt

    View full-size slide

  63. Questions?
    #wcbalt

    View full-size slide