intro to sass for wordpress developers
TRANSCRIPT
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://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