CSS Preprocessing Resources

preprocess

This is constantly being updated. Scroll to the bottom of the post to see a log of recent updates.

A few weeks ago, I posted a link to Chris Coyier’s “Get Yourself Pre-Processing in a Few Minutes.” If you haven’t watched it yet, it’s well worth the five minutes of your time. Why should you use a CSS Pre-Processor? For me, it’s simple: it saves time and reduces the effort it takes for me to write lots of complex CSS. Below are some links to help you get started. If you know of any links, applications, etc that ought to be added, let me know!

CSS Pre-Processing Languages

  • Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
  • LESS “extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.”
  • xCSS – an object-oriented CSS Framework
  • Stylus — a dynamic stylesheet language designed influenced by Sass and LESS.

Applications

  • Codekit (Mac) – Use for Less, Sass/SCSS, HAML, Jade, Optimizing Images, etc. (My personal favorite.) $25
  • Prepros (Mac/PC/Chrome Extension) Compiles LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript, LiveScript, Haml and Markdown.  Free
  • Koala (Mac/PC/Linux/Ubuntu) — Supports Less, Sass, CoffeeScript and Compass. Free
  • Hammer (Mac) — Built-in support for Sass (with Bourbon), CoffeeScript, HAML & Markdown. $23.99
  • Scout.app (PC/Mac) — Compass and Sass compiler. Free
  • Compass.app (PC/Mac/Linux) — Compass and Sass compiler. $10
  • WinLESS (PC)  — Windows GUI for LESS.js. Free
  • SimpLESS (Mac/PC) — LESS compiler. Free

Frameworks/Mixin Libraries

  • Less
    • Bootstrap — Popular HTML/CSS framework
    • LESS Elements — a collection of useful mixins for LESS
    • LESSHat — a universal mixin library
    • HelpLess — A LESS Library
    • 3L — Lots of Love for LESS, a mixin library
    • Schema — Responsive UI framework
  • Sass
    • Sass Bootstrap — A Sass-based port of the popular Less-based HTML/CSS framework.
    • Foundation 4 —
    • Gravity Framework — HTML5 and CSS3 framework
    • Gumby — CSS Framework
    • Compass — Sass CSS Authoring Framework
    • Bourbon — A Sass Mixin Library
    • Bourbon Neat — a lightweight semantic grid framework for Sass and Bourbon.
    • Susy — Responsive grids for Compass
    • Sassy Buttons — Awesome CSS3 buttons with Compass and Sass
    • Sassaparilla — A quick start template that leverages Sass and Compass. (It’s not a boilerplate or a theme.)

Further Reading

Updates

  • 16 Aug 2013 — Updated the list of applications and reorganized the Frameworks/Mixin Libraries.
  • 03 Oct 2013 — Added Schema to LESS Frameworks/Libraries