Nesting – Variables – @extend & Placeholder Selectors

CSS Preprocessors + WordPress

Learn how to write CSS in a whole new way

(Follow along at http://www.taupecat.com/csswp/)

Who am I?

• Front-End Developer & WordPress Themer
• Work for RP3 in Bethesda
• Pushing pixels since 1994

What Are CSS Preprocessors?

There is nothing you can do in a CSS preprocessor that you can't do in pure CSS.

They just make it easier, faster and more organized.

What are some of the major preprocessors out there?

LESS

JavaScript-based.

Low barrier to entry because you just include a JavaScript file with your code.

Also works well with node.js.

Sass

Ruby-based

Has 2 syntaxes: Sass (indentation-based) and SCSS (more like regular CSS)

Has Compass - framework that adds additional utilities like vendor prefixing, sprite generation, URL-shortcuts.

Why CSS Preprocessors Are Awesome*

*Not all features available in all preprocessors.

Nesting

.sidebar {
	border-left: 1px solid #262626;
	padding-left: 20px;

	aside {
		margin-bottom: 20px;

		a {
			color: #ffe44b;

			&:hover, &:active, &:focus {
				color: #e10000;
			}
		}
	}
}

Nesting

.sidebar {
	border-left: 1px solid #262626;
	padding-left: 20px;
}

.sidebar aside {
	margin-bottom: 20px;
}

.sidebar aside a {
	color: #ffe44b;
}

.sidebar aside a:hover,
.sidebar aside a:active,
.sidebar aside a:focus {
	color: #e10000;
}

Variables

Any string can be a variable.

Great for defining colors and font stacks.

$color-primary: #002366;
$font-header: Roboto, "Helvetica Neue", Arial, sans-serif;

body {
	background-color: $color-primary;
}

h1, h2, h3 {
	font-family: $font-header;
}

Variables

body {
	background-color: #002366;
}

h1, h2, h3 {
	font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}

@extend & Placeholder Selectors

%widget-default {
	background-color: #FFFCEB;
	color: #262626;
	text-decoration: underline;
}

.sidebar {
	@extend %widget-default;

	font-size: 13px;
}

.widget-area {
	@extend %widget-default;

	font-size: 16px;
}

@extend & Placeholder Selectors

.sidebar,
.widget-area {
	background-color: #FFFCEB;
	color: #262626;
	text-decoration: underline;
}

.sidebar {
	font-size: 13px;
}

.widget-area {
	font-size: 16px;
}

Concatenation & Minification

Two big words for making things smaller.

Sass has "partials", imported files that are concatenated into one bigger file and not processed separately.

Concatenation & Minification

-rw-r--r--   1 taupecat  staff   153 May 24 23:36 _asides.scss
-rw-r--r--   1 taupecat  staff   130 May 24 23:37 _comments.scss
-rw-r--r--   1 taupecat  staff   300 May 24 23:35 _content.scss
-rw-r--r--   1 taupecat  staff  5904 May 26 20:55 _global.scss
-rw-r--r--   1 taupecat  staff   298 May 24 23:37 _navigation.scss
-rw-r--r--   1 taupecat  staff  1731 May 25 22:02 _reset.scss
-rw-r--r--   1 taupecat  staff  1731 May 25 22:02 project.scss

Concatenation & Minification

@import "reset";
@import "global";
@import "navigation";
@import "content";
@import "asides";
@import "comments";

Concatenation & Minification

Resulting compiled "project.css" contains all of the imported files.

No extra HTTP requests required.

Functions

Do one thing, then return a result.

Calculate a value or modify a color, for example.

Functions

Awesome for responsive design, when you need:

/* target / context = result */

@function calc-percent($target, $context) {
	@return ($target / $context) * 100%;
}

@function cp($target, $context) {
	@return calc-percent($target, $context);
}

.main-content {
	width: cp(600px, 960px);
}

Functions

.main-content {
	width: 62.5%;
}

Mixins

$default-font-size: 16px !default;

@mixin rem($property, $value, $context: $default-font-size) {
    #{$property}: $value;
    #{$property}: ($value / $context * 1rem);
}

h1 {
	@include rem(font-size, 18px);
}

Mixins

h1 {
	font-size: 18px;
	font-size: 1.125rem;
}

Media Query Bubbling

This is the awesome sauce that makes responsive web design soooo much easier.

Media Query Bubbling

.main-content {
	float: left;
	margin-right: cp(20px, 960px);
	width: cp(600px, 960px);

	@media only all and (max-width: 560px) {
		float: none;
		margin-right: 0;
		width: 100%;
	}
}

.sidebar {
	float: left;
	width: cp(340px, 960px);

	@media only all and (max-width: 560px) {
		float: none;
		width: 100%;
	}
}

Note: Just an illustration. There are actually better ways to do this.

Media Query Bubbling

.main-content {
	float: left;
	margin-right: 2.083333333333%;
	width: 62.5%;
}

@media only all and (max-width: 560px) {
	.main-content {
		float: none;
		margin-right: 0;
		width: 100%;
	}
}

.sidebar {
	float: left;
	width: 35.416666666667%;
}

@media only all and (max-width: 560px) {
	.sidebar {
		float: none;
		width: 100%;
	}
}

More More MORE!

There are even more advanced features that I won't go into detail here:

• if/else control statements
• for/while loops
• Arrays (kinda sorta)

Why CSS Preprocessors Suck*

*Sucking is a highly subjective term.

Code Bloat

Use features such as nesting responsibly. (Inception rule)

A few extra characters here & there isn't going to be a big deal so long as you're minifying and Gzipping.

Added Complexity

No, it's not exactly CSS, but it's close.

Didn't your mother ever tell you that learning was a lifelong process?

Whither Our Workflow?

CLI

Using Sass?

Use sass --watch style.scss:style.css

CLI

Using Compass?

Use compass watch

Compass' config.rb file tells compass where to watch and where to compile to.

GUI

If the command line isn't your friend, try a GUI tool.

CodeKit is popular on the Mac.

Handles Sass, Compass, LESS and Stylus.

GUI

But wait, there's more!

• Lints, concatenates and minifies JavaScript
• Does stuff with Coffeescript, Haml, and some other things
• Adds imports and variables to HTML (.kit)
• And supposedly losslessly compresses images. (YMMV)

Scout

Just does Sass & Compass, but is cross-platform (Mac/Windows)

What About WordPress?

Hey, this talk was supposed to be about CSS preprocessors and WordPress!

Going the Plugin Route

There are a bunch of plugins that will process your LESS or Sass files and convert them into CSS for WordPress.

WP-LESS

Create your *.less file, then add it to your theme using wp_enqueue_style. WP-LESS does the rest.

WordPress Sass

Creates new function, wpsass_define_stylesheet('stylesheet-name.scss')

For reasons I will demonstrate in a moment, you cannot give your Sass file the name style.scss

Jetpack

Jetpack's CSS editor will recognize and process LESS and Sass (in the SCSS syntax)

Other Approaches

Don't name your project's main Sass file "style.scss".

style.css

/*
Theme Name: Twenty Twelve
Theme URI: http://wordpress.org/themes/twentytwelve
Author: the WordPress team
Author URI: http://wordpress.org/
*/

If you're going to minify the final result, those comments go away and your theme will be unusable.*

There's nothing in the WordPress handbook that says you must use style.css as your stylesheet.

*There is a way to force comments to be preserved, even when compressing the output:

/*!
Theme Name: Twenty Twelve
Theme URI: http://wordpress.org/themes/twentytwelve
Author: the WordPress team
Author URI: http://wordpress.org/
*/

My Process

Wrap Up

When wouldn't you use CSS preprocessors?

Uh, I dunno.

Further Reading

• LESS http://lesscss.org
• Sass http://sass-lang.com
• Compass http://compass-style.org/
• WP-LESS http://wordpress.org/plugins/wp-less/
• WordPress Sass http://wordpress.org/plugins/wordpress-sass/
• CodeKit http://incident57.com/codekit/
• Scout http://mhs.github.io/scout-app/
• Koala http://koala-app.com/

Yell At Me Later

• Twitter @taupecat
• Email tracy@taupecat.com
• Web http://www.taupecat.com/

Or Read My Book

Responsive WordPress Theming due out this fall.

Or available in early, advanced form NOW. http://www.manning.com/rotton/