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

Intro to Sass for WordPress Theme Developers

Intro to Sass for WordPress Theme Developers

If you are a theme developer, using Sass or Syntactically Awesome Stylesheets is a time saving way to write your code and it is easy to learn once you are familiar with CSS. In this session, you will learn how to harness the power of variables, nesting, and mixins to take advantage of everything that SASS has to offer to write awesome code. In order to get the most from this session, you must have a good understanding of HTML and CSS.

Suzette Franck

September 12, 2015
Tweet

More Decks by Suzette Franck

Other Decks in Technology

Transcript

  1. Intro to Sass for
    WordPress Theme Developers
    WordCamp Salt Lake City 2015
    by
    Suzette Franck

    View full-size slide

  2. Who I Am
    HTML and CSS teacher for Girl Develop It, Los Angeles
    Born in Hollywood, resides in So. California
    20 Years Coding & Web Development
    Developed over 300 WordPress sites
    Spoken at 25 WordCamps
    Reg. Contributor: WPwatercooler.com

    View full-size slide

  3. My Goal
    Teach you at least one thing you
    can put into practice right away

    View full-size slide

  4. by Dan Cederholm
    Sass For Web Designers

    View full-size slide

  5. What is Sass?
    Syntactically Awesome Style Sheets
    “Sass” not SASS & not S.A.S.S.

    View full-size slide

  6. sass-lang.com
    Sass on the Web

    View full-size slide

  7. Sass Basics
    Sass is a CSS pre-processor, outputs .CSS from .SCSS file
    Sass is a Ruby “Gem” or Application
    Gems need to be installed once on your computer
    World of pre-made additions (mixins) and other resources
    Two flavors: .SCSS (Sassy CSS) & .SASS
    .SCSS most closely resembles .CSS in syntax

    View full-size slide

  8. “Getting Started with Sass and Compass”
    thesassway.com/beginner/

    getting-started-with-sass-and-compass
    by Adam Stacoviak

    View full-size slide

  9. Sassmeister.com
    Try Sass Yourself!

    View full-size slide

  10. Why is Sass better?
    Backwards Compatible with all versions CSS
    Fills holes in CSS: variables to represent values
    Calculates values: colors, lengths
    Bubbles up: Media Queries can be written within their
    element
    Supports Advanced Logic/if..then, while, else, etc.
    Adopted by WordPress Core team & GPL Compatible*
    * Reference: http://wptavern.com/wordpress-core-adopts-sass-css-preprocessor

    View full-size slide

  11. How is Sass 

    More Efficient?
    When writing code: DRY Don’t Repeat Yourself!
    Reduces HTTP requests with multiple stylesheets
    @import
    Helps you write more advanced code faster
    Cleaner, easier to read once you are familiar
    Using variables, make site-wide changes in fewer places
    Different output styles can be chosen depending on
    goals

    View full-size slide

  12. Different Output Styles
    Nested (default)
    Expanded (closest to hand-crafted CSS)
    Compact (saves space)
    Compressed (saves most space, minified)
    Output style can be specified in your config.rb


    View full-size slide

  13. Different Output Styles
    Expanded, Nested, Compact, Compressed
    Preference can be specified in your config.rb

    View full-size slide

  14. Example config.rb

    View full-size slide

  15. Rename your .css file with
    an .scss extension to get started
    Are Sass Files Hard to Create?

    View full-size slide

  16. Compiling Your Sass
    Issue the “compass watch” command in your project directory
    through Terminal or Command Prompt
    When you save changes, the .CSS is automatically compiled
    Adjust the values in your config.rb file as necessary to get
    desired output

    View full-size slide

  17. Will it affect my workflow?
    After initial setup,
    development is easier than before

    View full-size slide

  18. Where Can I Get Sassified
    WordPress Starter Themes?
    All the cool kids are making starter themes from
    Underscores, Sass & different responsive grid systems,
    Here’s a few that I like, but feel free to explore!

    View full-size slide

  19. “Underscores” WordPress Theme
    by Automattic
    http://underscores.me/

    View full-size slide

  20. “Heisenberg” WordPress Theme
    by Zeek Interactive
    https://github.com/
    ZeekInteractive/heisenberg

    View full-size slide

  21. “Some Like it Neat” WordPress Theme
    by DigiSavvy
    https://github.com/digisavvy/
    some-like-it-neat

    View full-size slide

  22. “WD_S” WordPress Theme
    by WebDevStudios
    https://github.com/
    webdevstudios/wd_s

    View full-size slide

  23. “Roll Your Own” by You!
    Simplest most obvious solution is best
    Share your hard work on Github

    View full-size slide

  24. Alrighty…
    Ready for some .SCSS
    Sassy CSS Code?

    View full-size slide

  25. Alrighty…
    Ready for some .SCSS
    Sassy CSS Code?

    View full-size slide

  26. Comments in Sass

    View full-size slide

  27. _partials.scss
    Partials are files that exist only as a fragment to be used in
    another file
    Partials are not complete by themselves, but they help you
    modularize your code
    Partials can be included in elaborate folder structures
    Begins with an _ and end with .scss
    Drop your partial folder on Sublime to open the folder - time
    saver!

    View full-size slide

  28. Working with Partials in Sublime

    View full-size slide

  29. @import
    Modularize your CSS into separate pages or partials
    Re-use your favorite mixins on all of your projects
    Compiled into one .css file at end
    Fewer HTTP requests - performance!
    Import others’ mixins and use them

    View full-size slide

  30. Nesting All The Things
    Repeated selectors are nested inside curly
    braces
    & is a placeholder for the parent selector
    Namespaces can also be nested, ie font,
    background
    Compiled CSS will always be more verbose


    View full-size slide

  31. Nesting Selectors

    View full-size slide

  32. Nesting Namespaces

    View full-size slide

  33. $variables
    Finally! Variables for CSS!
    Declare in your .SCSS file like $name: value;
    Call by $name in your CSS
    Ability to change variables in one place and use
    everywhere
    Useful for defining colors in color palette, font
    stacks, grid systems
    Don’t forget 140 color names in CSS3! (Google it)


    View full-size slide

  34. @mixin
    Finally! Macros for CSS!
    Re-usable blocks of styles
    Define with @mixin declaration
    Call with @include
    Useful for CSS3 Vendor Prefixes
    Powerful with arguments
    Many pre-made mixins you can use in community
    Compass, Bourbon, GitHub, Your Own Library


    View full-size slide

  35. @mixin with Arguments

    View full-size slide

  36. darken, lighten, adjust-hue, saturate, desaturate,
    invert, compliment, etc.
    Full list at:

    http://sass-lang.com/documentation/Sass/Script/
    Functions.html
    Hexidecimal # is calculated & output in final CSS

    Sass Color Functions

    View full-size slide

  37. http://sassme.arc90.com/
    Sass Color Functions

    View full-size slide

  38. http://jackiebalzer.com/color
    Sass Color Functions

    View full-size slide

  39. Sass Color Functions

    View full-size slide

  40. mashable.com/2013/06/11/
    sass-compass-tools
    Other Resources

    View full-size slide

  41. So…
    Who is going to
    experiment with Sass?

    View full-size slide

  42. Thank you to SiteGround!
    Highly Recommended Web
    Hosting for WordPress

    View full-size slide

  43. Q & A
    Any Questions?

    View full-size slide

  44. Thank you for being here!
    Suzette Franck
    Twitter: @suzette_franck

    linkedin & speakerdeck & slideshare

    View full-size slide