Falling in Love with Sass for WordPress

Follow along at:
http://wpshout.com/sass-presentation

Hi! I'm Fred

WPShout | wpshout.com | @wpshout

Press Up | pressupinc.com | @pressupinc

CSS is Great

Easy, flexible control over almost every aspect of layout

Probably the technical language I feel most mastery over

…is Better

Sass: CSS Preprocessor

(Write in Sass, compiles to CSS)

Two Main Advantages of Sass

1. Much DRYer than CSS
2. Dynamic where CSS is static

Keep these in mind as we go through…

Sass Basics

Nesting

DRYer Syntax

/* I'm repetitive CSS */
.container { background: #fff; }
.container .box { background: #eee; }
.container .box .link { color: #333; }

/* I'm DRYer Sass */
.container { background: #fff;
	.box { background: #eee; 
		.link { color: #333; }
	}
}

Variables

CSS is Static

/* I'm static CSS */
.page-title {
	color: #249AC8;
}

.footer {
	background: #249AC8;
}

.bordered-box {
	border: 1px #249AC8 solid;
}

Sass is Dynamic!

/* I'm dynamic Sass */
$theme-accent-color: #249AC8; // Change me *once* sitewide

.page-title {
	color: $theme-accent-color;
}

.footer {
	background: $theme-accent-color;
}

.bordered-box {
	border: 1px $theme-accent-color solid;
}

Mixins

Reusable, Dynamic CSS Declarations

CSS is Static and Repetitive

/* I'm static CSS */
.small-rounded-square {
	height: 16px;
	width: 16px;
	border: 1px #333 solid;
	border-radius: 1px;
}

.medium-rounded-square {
	height: 32px;
	width: 32px;
	border: 2px #333 solid;
	border-radius: 2px;
}

.large-rounded-square {
	height: 48px;
	width: 48px;
	border: 3px #333 solid;
	border-radius: 3px;
}

Sass is Dynamic and DRY!

/* I'm dynamic Sass */
@mixin rounded-square($side: 16px) {
	width: $side;
	height: $side;
	border: $side/16 #333 solid;
	border-radius: $side/16;
}

.small-rounded-square {
	@include rounded-square;
}

.medium-rounded-square {
	@include rounded-square(32px);	
}

.large-rounded-square {
	@include rounded-square(48px);
}

Functions

Return Dynamic Values

@function ensureTextContrast($link-color, $background-color) {
	/* Getting value for contrast */
	$diff: lightness($link-color) - lightness($background-color);

	/* If high enough contrast, @return original color */
	@if abs($diff) > 15% {
		@return $link-color;
	}

	/* Dark background; lighten */
	@if lightness($background-color) < lightness(#aaaaaa) {
		@return lighten($link-color, 30);
	} 

	/* Light background; darken */
	@else {
		@return darken($link-color, 30);
	} 
}

Extends

Inherit a Class's Properties

.base-font {
	font-family: $base-font-stack; /* $base-font-stack = Arial, sans-serif */
} 

p {
	@extend .base-font;
}

/* Compiles to this CSS: */
.base-font, p {
	font-family: Arial, sans-serif;
}

Include Sass Partials

(Own Files and External Libraries)

/* In style.scss, main Sass stylesheet */
@import 'libs/bourbon/bourbon';
@import 'libs/neat/neat'; 
@import 'libs/font_awesome';

A Bit of Sass Advice

1. Be Mindful of the CSS Your Sass Compiles To

Especially in WordPress!

…You're Not Alone.

Avoid Nesting Hell

.page-content {
	.widget-areas {
		.widget {
			.widget-title {
				font-weight: bold;
			}
		}
	}
}

/*Compiles to: */
.page-content .widget-areas .widget .widget-title {
	font-weight: bold;
}

/* Way too specific! Can =/= Should */

Don't Over-@Extend

@Extend Can Obfuscate Meaning in Compiled CSS

/* Why are these things linked? Not clear here or in HTML markup */
h1, article .title, footer .big-deal h2 {
  font-size: 2rem;
  line-height: 1.75;
}

Meaning is What Classes are For!

/* Give elements this class where it's needed */
.standout-headline {
  font-size: 2rem;
  line-height: 1.75;
}

@Extend Nightmare Mode!

.product .single_add_to_cart_button, .cart .button, input.checkout-button.alt.button, .shipping-calculator-form .button, .multistep_step .button, #place_order.button, .single-product .single_add_to_cart_button.button.alt, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce #content input.button, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce-page #respond input#submit, .woocommerce-page #content input.button {
	background-color: #605f5e;
}

How About…

.colored-button {
	background-color: #605f5e;
}

/* Plus appropriate HTML markup */

Comments Can Be Nice

Sass Comment Syntax:

// I'm always removed in compiled CSS
/* I'll appear in normal CSS, but not "compressed"/minified CSS */
/*! I'm a "loud" comment that'll appear in (even minified) CSS! */

Theme developers: You'll need a "loud" comment at the top of style.scss to give theme info.

2. Stay Organized

Organize Partials by Function…

/* In style.scss */
@import 'functions';
@import 'libs';
@import 'vars';
@import 'vars_derived';
@import 'mixins';
@import 'extends';
@import 'wp_defaults';
@import 'plugins';
@import 'elements';

…And Layout Section

/* In elements.scss */
@import "elements/header";
@import "elements/slider";
@import "elements/content";
@import "elements/sidebar";
@import "elements/blog";
@import "elements/footer";

Organizing Your Sass Markup

• Only nest when you want corresponding nested CSS
• Base rules on classes when possible, not element type or ID (OO CSS)
• Nice to structure top-to bottom like layout, and general to specific

e.g.

/* Sidebar partial */
.widget-area {
	@include clearfix;
	font-size: 1.2em;
}

.widget {
	@include rounded-corners(.5em);
	background: #eee;
}

.widget-title {
	font-weight: normal;
}

3. Find a Compiler that Doesn't Scare You

Sass Usually Compiles via Ruby

• How do I install Ruby?
• Will my server even run Ruby?
• How do I install the compiler?
• How do I use the terminal?
• What is Ruby?
(´-﹏-`；)

I Use Koala

• GUI Compiler
• Based on world's least-threatening animal
• Works!

Sass and WordPress

New Themes

Absolutely Use Sass

You will love your life

Plugin Development

Probably Use Sass

It's very easy to set up

Savings minimal in small projects, but hey

Child Theming

Maybe Use Sass

Vanilla CSS will compile as Sass, so @import still works in style.scss

But on some themes (and for some clients) you may be too far from elegance for Sass to help you

Thank You!

[email protected] | @wpshout