Simplify your styles
with CSS Preprocessors

Andrew (Pez) Pengelly
@pezillionaire
http://pezillionaire.com

Assumptions

• You're down with CSS 3 and HTML 5.

• You can run WordPress locally (on your Mac/PC).

• You have/can/want to build custom WP themes.

• Bacon is Delicious

Why use a preprocessor?

• Take pain points out of CSS

• Better WP theme organization

• Fewer HTTP requests (faster loading!)

• Access to awesome features and libraries.

What do preprocessor do?

• VARIABLES!!

• Nested rules.

• Mixins

• Simplified functions and operators

The Options - SCSS

• CSS like syntax. Easy to change CSS files.

• Popular with many developers.

• Used by Zerb Foundation 4.

• Bourbon and Compass are amazing libraries.

The Options - LESS

• Arguably the most CSS like syntax.

• Used by Twitter Bootstrap.

• Many complier options available

The Options - Stylus

• Minimalistic syntax.

• Developed for use with Node.

• Can really only be used with Node.

• Not relevant at a WordPress Conference (yet?).

Let's focus on SCSS

• Broadest support.

• Easy to get started.

• Fun and helpful libraries.

• I like it and it's my presentation damnit!

Getting Started

• Interweb browser (Chrome)

• Text Editor (Sublime Text 2)

• Compiler software (CodeKit)

• Local Install of WordPress and a Theme (MAMP)

Let's get set up

• Get MAMP and WP running.

• Find your Theme's style.css and other CSS files.

• Point your compiler to the source files.

• Set compiler options (libraries, output)

Stop! Demo time!

Cheers!

@pezillionaire
pezillionaire.com/wcyvr