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.