Simplify your styles with CSS Preprocessors
Pez Pengelly
@pezillionaire
Presentate
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
- / 12
-
Published on , Last updated: