Getting set up for web development – part 5: CSS pre-processors

In the previous article, I talked about JavaSript. This article will talk about CSS pre-processors. Not really being the CSS guy, This article will be shorter that the previous ones.

Pre-processors?

CSS pre-processors are kind of the same thing as JavaScript supersets, in the sense that they provide a layer above CSS to help fill some holes in native CSS. While allowing you to do more than native CSS, your output file will still be a CSS file understood by the browser.

Why?

CSS itself, whilst very useful, is not a real programming language. It lacks some of the core concepts of a programming language, such as functions and variables. Just imagine that you use a color for different elements in your application, and then decide to change it. You then have to find all occurences of that color and replace it, as you have no variable. CSS pre-processors offer that kind of flexibilty. In a nutshell, the main advantages of pre-processors are:

  • variables
  • functions
  • mixins (combination of classes to create another class)
  • completion for browser-specific prefixes (moz- webkit-, etc.)

I already mentioned that I am not the CSS guy, but pre-processors tend to make the experience less painful.

So…

As usual with the web, several options are available:

I tend to choose Less as it is the one used by bootstrap, which is one of my frameworks of choice. That’s the only reason why I prefer it over the others; for what I know they are more or less equivalent.

So, short story short, use a pre-processor, suiting your needs, and in accordance with what you use.

Advertisements
Leave a comment

1 Comment

  1. Getting set up for web development – part 1: choosing an editor | Wandering in the community

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: