Intro to Sass for WordPress Developers

Intro to Sass for WordPress Theme Developers

WordCamp Salt Lake City 2015

by

Suzette Franck

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

My GoalTeach you at least one thing you can put into practice right away

by Dan Cederholm

Sass For Web Designers

What is Sass?

Syntactically Awesome Style Sheets

“Sass” not SASS & not S.A.S.S.

sass-lang.com

Sass on the Web

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

“Getting Started with Sass and Compass”

thesassway.com/beginner/getting-started-with-sass-and-compass

by Adam Stacoviak

Sassmeister.com

Try Sass Yourself!

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

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

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

Different Output Styles

Expanded, Nested, Compact, Compressed

Preference can be specified in your config.rb

Example config.rb

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

Are Sass Files Hard to Create?

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

Will it affect my workflow?

After initial setup, development is easier than before

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!

“Underscores” WordPress Theme by Automattic

http://underscores.me/

“Heisenberg” WordPress Theme by Zeek Interactive

https://github.com/ZeekInteractive/heisenberg

“Some Like it Neat” WordPress Theme by DigiSavvy

https://github.com/digisavvy/some-like-it-neat

“WD_S” WordPress Theme by WebDevStudios

https://github.com/webdevstudios/wd_s

“Roll Your Own” by You!

Simplest most obvious solution is best

Share your hard work on Github

Alrighty…Ready for some .SCSS

Sassy CSS Code?

Alrighty…Ready for some .SCSS

Sassy CSS Code?

Comments in Sass

_partials.scssPartials 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!

Working with Partials in Sublime

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

@import

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

Nesting Selectors

Nesting Namespaces

$variablesFinally! 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)

$variables

@mixinFinally! 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

@mixin

@mixin with Arguments

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

http://sassme.arc90.com/

Sass Color Functions

http://jackiebalzer.com/color

Sass Color Functions

Sass Color Functions

mashable.com/2013/06/11/sass-compass-tools

Other Resources

So…Who is going to

experiment with Sass?

Thank you to SiteGround!

Highly Recommended Web Hosting for WordPress

Q & A

Any Questions?

Thank you for being here!

Suzette Franck Twitter: @suzette_franck

linkedin & speakerdeck & slideshare