CSS Preprocessors: getting started with LESS and Sass

You probably have heard of LESS, Sass, Stylus, and others but may not have had a chance yet to figure them out. Here’s a very brief overview…

Why should you be using one of these?
CSS Preprocessors exist to help make your CSS more dynamic. They use their own languages, albeit all rather similar, to do the same things. They make CSS better 

  • Retain browser compatibility
  • Allow for the creation of variables using reusable CSS properties
  • Allow for better code by making it more scalable and modular
  • Introduce parent references, math, mixins, nesting, and error reporting

Which one should you use?
There is no bad choice. Like with anything else in programming other factors are the drivers here. Do you use Ruby? Then you will probably gravitate towards Sass. Are you a heavy Bootstrap user? Then consider looking at LESS or Stylus… Research and see which works for you.

Useful links to get started

  • LESS
    • LESS extends CSS with dynamic behavior such asvariables, mixins, operations and functionsLESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).

  • Sass
    • Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rulesvariables,mixinsselector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. Sass has two syntaxes. The most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.
  • Stylus
    • “Expressive, dynamic, robust CSS”
  • SimpLESS
    • “The most powerful thing SimpLESS does: Save your *.less file and, BOOOM, SimpLESS generates a 100% valid standard CSS document out of it. No further steps, it’s that simple.”
  • WinLESS
    • “WinLess is a Windows GUI for LESS.js. WinLess is a must-have for the webdeveloper who uses Windows.”
  • nib
    • Nib is a small and powerful library for the Stylus CSS language, providing robust cross-browser CSS3 mixins to make your life as a designer easier.

Still developing for IE6? Get significant CSS3 compatibility with PIE

Seriously? Well you’re sadly, and probably dangerously for your or worse other peoples data, not alone.

Coming to the rescue for the presentation layer at least as security was thrown out the window with the bathwater AND the baby when you decided to stay with 6 – is PIE.

PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties. It is simply attached to an element in the CSS file like: behavior: url(PIE.htc); and adds support (full or partial) for the following CSS3 features:

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient as background image

Note that the missing CSS3 properties are under development…

For more info and the actual PIE itself go here: http://css3pie.com/