CSS Preprocessors

CSS has no memory or intelligence, meaning you’ll have to write certain style declarations again and again. Plus if you have to change something, you’ll have to find those places again and hand-edit them (even with using Object Oriented CSS).

CSS_preprocessorsPreprocessors take some ideas from hardcore computing programming and puts them back into CSS. The benefits include reusing the same code across multiple projects, change an entire site’s styling with a few edits, completely separating styling from content mechanics.

But since no direct browser supports preprocessed CSS you must either compile your pre-CSS on your development machine and upload the standard CSS that is generated or can setup your server to work with the raw pre-CSS files generating the CSS on the fly.

There are three main CSS preprocessors used right now:

SASS (Stylistically Awesome Stylesheets) is written in Ruby and works best developer-side, compiling preprocessed CSS to standard CSS you upload to web servers. There are many tools to automate the compilation and upload.

As a language, SASS is a two-in-one. You can write SCSS, is a strict superset of CSS. Or write pure SASS, which isn’t. It includes conditionals, repeats outside of mixins, and complex selector management. When used with Compass, it adds features like sprite management, simplified grids, and typography and easier cross-browser support.

LESS was originally developed by Alexis Sellier and includes the basic feature list for a preprocessor such as variables; mixins which are variables that drop all the content of a class into another with a single line; rule nesting, which clarifies inheritance; functions, which can modify variables with arithmetic; and color-management features.

LESS includes guarded mixins, which produce different CSS according to tests you specify but doesn’t have fully generated conditionals. Often used with Bootstrap, LESS is great for grids with optional CSS3 support for animations and gradients.

You can run LESS from the command-line, or from visual tools. Server-side, you can install a native LESS compiler, as well as use Node.js (for better performance).

Stylus isn’t as popular as the other two but is worth a look. Stylus can copy any parameter string into the CSS, making functions more powerful. It also has iteration and loops, so you can generate repeated elements with styles under code control.

Stylus runs under Node.js, so you’ll need that, and then use NPM, the node packet manager, to install Stylus.

Tools to make processing easier

CodekKt is the ultimate preprocessor toolkit, with built-in GUI support for LESS, SASS and Stylus and automatic compilation after any edit.

Scout takes the effort out of Ruby, Compass and SASS for Mac users, by bundling them all into one development environment. It’s not a full GUI editor like CodeKit, but simplifies project management for developers who want to work with SASS and Compass but don’t want to write end dealing with command line directory copying and compilation.

LiveReload combines built-in compilation for SASS, LESS, Stylus and other tools. It’s big feature is automated compilation: it monitors the files in your project and automatically recompiles CSS when you edit it, so you don’t need to worry about command line tools or setting up a preprocessor on your server.

Crunch is a LESS editor and compiler. You don’t need to setup a command line tool or install any extra add-ons, plug-ins or extensions. It works in a simple GUI-editor kind of way. It’s a great option if you want to do some quick experiments with LESS without getting distracted by a comprehensive server or client-side installation.

Leave a Reply

Your email address will not be published. Required fields are marked *