Intro to Sass for
WordPress Theme Developers
WordCamp Salt Lake City 2015
by
Suzette Franck
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
My Goal
Teach you at least one thing you
can put into practice right away
Slide 4
Slide 4 text
by Dan Cederholm
Sass For Web Designers
Slide 5
Slide 5 text
What is Sass?
Syntactically Awesome Style Sheets
“Sass” not SASS & not S.A.S.S.
Slide 6
Slide 6 text
sass-lang.com
Sass on the Web
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
“Getting Started with Sass and Compass”
thesassway.com/beginner/
getting-started-with-sass-and-compass
by Adam Stacoviak
Slide 9
Slide 9 text
Sassmeister.com
Try Sass Yourself!
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
Different Output Styles
Expanded, Nested, Compact, Compressed
Preference can be specified in your config.rb
Slide 14
Slide 14 text
Example config.rb
Slide 15
Slide 15 text
Rename your .css file with
an .scss extension to get started
Are Sass Files Hard to Create?
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
Will it affect my workflow?
After initial setup,
development is easier than before
Slide 18
Slide 18 text
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!
Slide 19
Slide 19 text
“Underscores” WordPress Theme
by Automattic
http://underscores.me/
Slide 20
Slide 20 text
“Heisenberg” WordPress Theme
by Zeek Interactive
https://github.com/
ZeekInteractive/heisenberg
Slide 21
Slide 21 text
“Some Like it Neat” WordPress Theme
by DigiSavvy
https://github.com/digisavvy/
some-like-it-neat
Slide 22
Slide 22 text
“WD_S” WordPress Theme
by WebDevStudios
https://github.com/
webdevstudios/wd_s
Slide 23
Slide 23 text
“Roll Your Own” by You!
Simplest most obvious solution is best
Share your hard work on Github
Slide 24
Slide 24 text
Alrighty…
Ready for some .SCSS
Sassy CSS Code?
Slide 25
Slide 25 text
Alrighty…
Ready for some .SCSS
Sassy CSS Code?
Slide 26
Slide 26 text
Comments in Sass
Slide 27
Slide 27 text
_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!
Slide 28
Slide 28 text
Working with Partials in Sublime
Slide 29
Slide 29 text
@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
Slide 30
Slide 30 text
@import
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
Nesting Selectors
Slide 33
Slide 33 text
Nesting Namespaces
Slide 34
Slide 34 text
$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)
Slide 35
Slide 35 text
$variables
Slide 36
Slide 36 text
@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
Slide 37
Slide 37 text
@mixin
Slide 38
Slide 38 text
@mixin with Arguments
Slide 39
Slide 39 text
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
Slide 40
Slide 40 text
http://sassme.arc90.com/
Sass Color Functions
Slide 41
Slide 41 text
http://jackiebalzer.com/color
Sass Color Functions
Slide 42
Slide 42 text
Sass Color Functions
Slide 43
Slide 43 text
mashable.com/2013/06/11/
sass-compass-tools
Other Resources
Slide 44
Slide 44 text
So…
Who is going to
experiment with Sass?
Slide 45
Slide 45 text
Thank you to SiteGround!
Highly Recommended Web
Hosting for WordPress
Slide 46
Slide 46 text
Q & A
Any Questions?
Slide 47
Slide 47 text
Thank you for being here!
Suzette Franck
Twitter: @suzette_franck
linkedin & speakerdeck & slideshare