CD

2012-08-03

CSS Preprocessing Resources

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

• Get Yourself Pre-Processing in a Few Minutes
• Using the LESS CSS Preprocessor for Smarter Style Sheets
• An Introduction to LESS and Comparison to Sass
• SASS vs. LESS
• Working with CSS Preprocessors — Google Developers Guide on using Chrome Dev Tools.
• Sass Style Guide — Great suggestions on best practices for Sass syntax and organization.
• Assembling Sass — Great introductory course from Code School.
• Useful CSS3 LESS Mixins
• SassBites — Fantastic video podcast all about Sass.
• Sass News Weekly — Email newsletter + Twitter account

Updates

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

This item was posted by Chris Harrison.

Tags:

• featured

Categories:

• Web Development

Comments are closed.