$30 off During Our Annual Pro Sale. View Details »

#WCPVD - Getting SASSy

Brad Parbs
August 17, 2013

#WCPVD - Getting SASSy

Brad Parbs

August 17, 2013
Tweet

More Decks by Brad Parbs

Other Decks in Technology

Transcript

  1. #wcpvd
    Let’s get SASSy
    1
    Saturday, August 17, 13

    View Slide

  2. #wcpvd
    #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
    2
    Saturday, August 17, 13

    View Slide

  3. #wcpvd
    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
    3
    Saturday, August 17, 13

    View Slide

  4. #wcpvd
    What is SASS?
    Write less, do more.
    4
    Saturday, August 17, 13

    View Slide

  5. #wcpvd
    What is SASS?
    SASS is awesome.
    5
    Saturday, August 17, 13

    View Slide

  6. #wcpvd
    Why SASS over LESS?
    Compass - “drop-in” bits of SASS
    @extend() - allows for cleaner HTML
    Easily Embedding Media Queries
    #wcmke
    6
    Saturday, August 17, 13

    View Slide

  7. #wcpvd
    Installation
    Prepros
    #wcmke
    7
    Saturday, August 17, 13

    View Slide

  8. #wcpvd
    Now we write some SASS...
    #wcmke
    8
    Saturday, August 17, 13

    View Slide

  9. #wcpvd
    And it becomes CSS!
    #wcmke
    9
    Saturday, August 17, 13

    View Slide

  10. #wcpvd
    Any Questions?
    10
    Saturday, August 17, 13

    View Slide

  11. #wcpvd
    Let’s get SASSy
    11
    Saturday, August 17, 13

    View Slide

  12. #wcpvd
    Two Flavors
    .scss .sass
    #wcmke
    12
    Saturday, August 17, 13

    View Slide

  13. #wcpvd
    Two Flavors
    .scss .sass
    More similar to CSS
    Easier to jump into from CSS
    Probably where you want to start
    Less keystrokes
    Cleaner files
    #wcmke
    13
    Saturday, August 17, 13

    View Slide

  14. #wcpvd
    Nesting
    #wcmke
    14
    Saturday, August 17, 13

    View Slide

  15. #wcpvd
    Nesting
    #wcmke
    Nesting
    15
    Saturday, August 17, 13

    View Slide

  16. #wcpvd
    Parent Selector Reference
    #wcmke
    16
    Saturday, August 17, 13

    View Slide

  17. #wcpvd
    Parent Selector Reference
    #wcmke
    17
    Saturday, August 17, 13

    View Slide

  18. #wcpvd
    Selector Bubble Up
    Perfect for using Media Queries to build responsively.
    #wcmke
    18
    Saturday, August 17, 13

    View Slide

  19. #wcpvd
    Partials / File Structure
    http://b.parbs.me/PP2n
    http://b.parbs.me/POcZ
    #wcmke
    19
    Saturday, August 17, 13

    View Slide

  20. #wcpvd
    Variables
    #wcmke
    20
    Saturday, August 17, 13

    View Slide

  21. #wcpvd
    @extend()
    #wcmke
    #wcmke
    21
    Saturday, August 17, 13

    View Slide

  22. #wcpvd
    @extend()
    #wcmke
    22
    Saturday, August 17, 13

    View Slide

  23. #wcpvd
    Silent @extend
    #wcmke
    23
    Saturday, August 17, 13

    View Slide

  24. #wcpvd
    Mixins
    24
    Saturday, August 17, 13

    View Slide

  25. #wcpvd
    Mixins
    25
    Saturday, August 17, 13

    View Slide

  26. #wcpvd
    Mixins with Arguments
    w/
    26
    Saturday, August 17, 13

    View Slide

  27. #wcpvd
    Mixins with Arguments
    w/
    27
    Saturday, August 17, 13

    View Slide

  28. #wcpvd
    Mixins with Default Arguments
    28
    Saturday, August 17, 13

    View Slide

  29. #wcpvd
    Mixins
    29
    Saturday, August 17, 13

    View Slide

  30. #wcpvd
    http://bourbon.io/
    30
    Saturday, August 17, 13

    View Slide

  31. #wcpvd
    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
    31
    Saturday, August 17, 13

    View Slide

  32. #wcpvd
    Mixins
    32
    Saturday, August 17, 13

    View Slide

  33. #wcpvd
    gif break!
    33
    Saturday, August 17, 13

    View Slide

  34. #wcpvd
    Operations
    34
    Saturday, August 17, 13

    View Slide

  35. #wcpvd
    Operations within functions
    35
    Saturday, August 17, 13

    View Slide

  36. #wcpvd
    Color Functions
    36
    Saturday, August 17, 13

    View Slide

  37. #wcpvd
    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% );
    37
    Saturday, August 17, 13

    View Slide

  38. #wcpvd
    Color Functions
    38
    Saturday, August 17, 13

    View Slide

  39. #wcpvd
    Color Functions
    39
    Saturday, August 17, 13

    View Slide

  40. #wcpvd
    Color Functions
    40
    Saturday, August 17, 13

    View Slide

  41. #wcpvd
    Color Operations
    http://sassme.arc90.com/
    41
    Saturday, August 17, 13

    View Slide

  42. #wcpvd
    Operations with Directive
    42
    Saturday, August 17, 13

    View Slide

  43. #wcpvd
    #wcmke
    Operations - Range of Numbers
    43
    Saturday, August 17, 13

    View Slide

  44. #wcpvd
    Operations - Range of Numbers with Silent placeholders
    #wcmke
    44
    Saturday, August 17, 13

    View Slide

  45. #wcpvd
    #wcmke
    Operations - List of Values
    45
    Saturday, August 17, 13

    View Slide

  46. 46
    Saturday, August 17, 13

    View Slide

  47. #wcpvd
    #wcmke
    config.rb
    47
    Saturday, August 17, 13

    View Slide

  48. #wcpvd
    #wcmke
    config.rb
    48
    Saturday, August 17, 13

    View Slide

  49. #wcpvd
    #wcmke
    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.
    49
    Saturday, August 17, 13

    View Slide

  50. #wcpvd
    #wcmke
    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.
    50
    Saturday, August 17, 13

    View Slide

  51. #wcpvd
    #wcmke
    Let’s install Twitter Bootstrap
    https://github.com/hecbuma/compass-bootstrap
    51
    Saturday, August 17, 13

    View Slide

  52. #wcpvd
    #wcmke
    config.rb
    52
    Saturday, August 17, 13

    View Slide

  53. #wcpvd
    #wcmke
    config.rb
    53
    Saturday, August 17, 13

    View Slide

  54. #wcpvd
    #wcmke
    Processing Modes
    :nested
    :expanded
    :compact
    :compressed
    54
    Saturday, August 17, 13

    View Slide

  55. #wcpvd
    #wcmke
    config.rb
    55
    Saturday, August 17, 13

    View Slide

  56. #wcpvd
    #wcmke
    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
    56
    Saturday, August 17, 13

    View Slide

  57. #wcpvd
    #wcmke
    Building a WP Theme
    57
    Saturday, August 17, 13

    View Slide

  58. #wcpvd
    #wcmke
    Tools
    http://sassmeister.com/ http://codepen.io/
    http://thesassway.com/
    58
    Saturday, August 17, 13

    View Slide

  59. #wcpvd
    #wcmke
    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/
    59
    Saturday, August 17, 13

    View Slide

  60. #wcpvd
    #wcmke
    I’m Brad Parbs.
    @BradParbs
    brad.parbs.me
    http://b.parbs.me/Qspg
    Slides:
    60
    Saturday, August 17, 13

    View Slide

  61. #wcpvd
    Questions?
    61
    Saturday, August 17, 13

    View Slide

  62. #wcpvd
    62
    Saturday, August 17, 13

    View Slide