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

More Decks by Suzette Franck

Other Decks in Technology


  1. Intro to Sass for WordPress Theme Developers WordCamp Salt Lake

    City 2015 by Suzette Franck
  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
  3. My Goal Teach you at least one thing you can

    put into practice right away
  4. by Dan Cederholm Sass For Web Designers

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

    & not S.A.S.S.
  6. sass-lang.com Sass on the Web

  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
  8. “Getting Started with Sass and Compass” thesassway.com/beginner/
 getting-started-with-sass-and-compass by Adam

  9. Sassmeister.com Try Sass Yourself!

  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
  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
  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

  13. Different Output Styles Expanded, Nested, Compact, Compressed Preference can be

    specified in your config.rb
  14. Example config.rb

  15. Rename your .css file with an .scss extension to get

    started Are Sass Files Hard to Create?
  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
  17. Will it affect my workflow? After initial setup, development is

    easier than before
  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!
  19. “Underscores” WordPress Theme by Automattic http://underscores.me/

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

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

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

  23. “Roll Your Own” by You! Simplest most obvious solution is

    best Share your hard work on Github
  24. Alrighty… Ready for some .SCSS Sassy CSS Code?

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

  26. Comments in Sass

  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!
  28. Working with Partials in Sublime

  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
  30. @import

  31. 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

  32. Nesting Selectors

  33. Nesting Namespaces

  34. $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)

  35. $variables

  36. @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

  37. @mixin

  38. @mixin with Arguments

  39. darken, lighten, adjust-hue, saturate, desaturate, invert, compliment, etc. Full list

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

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

  42. Sass Color Functions

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

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

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

  46. Q & A Any Questions?

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

    & speakerdeck & slideshare