Slide 1

Slide 1 text

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