What is a CSS Preprocessor?

• A language that compiles to CSS
• An abstraction of CSS
• A tool to extend and enhance CSS
• Programmatic CSS

How they work

WRITE 

COMPILE

USE

Create using your preferred CSS preprocessor

Compiles to standard CSS

Command line
Helper Application
Javascript taskrunner, 
e.g. Gulp or Grunt

Why use a CSS Preprocessor?

✓   Keeps your CSS DRY (Don't Repeat Yourself)

✓   Reinforces good practices

✓   Supports code reuse

✓   Supports maintainability

✓   Enhances readability

✓   Makes difficult tasks easier

Workflow & Tools

CodeKit  Mac

Terminal  Mac / Windows

Prepos  Windows

Grunt & Gulp  Mac / Windows

Introduction to Stylus

https://learnboost.github.io/stylus

TJ Holowaychuk

@tjholowaychuk

Express

Jade

Mocha

 

Features

• Optional colons
• Optional semi-colons
• Optional commas
• Optional braces
• Variables
• Interpolation
• Mixins
• Arithmetic
• Type coercion
• Dynamic importing

• Conditionals

• Iteration

• Nested selectors
• Parent referencing
• Variable function calls
• Lexical scoping
• Built-in functions (60+)
• In-language functions
• Optional compression
• Optional image inlining

• Stylus executable
• Robust error reporting
• Single-line and multi-line comments
• CSS literal for those tricky times
• Character escaping
• TextMate bundle
• Uses NodeJS
• JavaScript API

Walkthrough

https://learnboost.github.io/stylus/try.html

Try it out!

https://learnboost.github.io/stylus

Documentation