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.
Applications
- Codekit – (Mac) – Use for Less, Sass/SCSS, HAML, Jade, Optimizing Images, etc. (My personal favorite.)
- Scout.app – (PC/Mac)
- Compass.app – (PC/Mac/Linux)
- WinLESS – (PC)
- SimpLESS – (PC)
- .less – (PC) – Less CSS for .Net
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
Frameworks
- Twitter Bootstrap – (Less)
- Foundation 3 – (Sass)