CSS Enlightenment with LESS

I have recently started modifying one of my older site’s CSS. Looking at the file gave me a headache as so much duplication. It was harder to figure it what was really going on.

I have also heard about LESS and other CSS pre-processors but really have not had a chance to use it until now.

After using LESS CSS file is much leaner and easier to navigate through. My CSS classes are no longer duplicated and instead they are wrapped in reusable types called mixins (see also mix what?)

There are re-usable variables defined for various styles, and I have reused those variable frequently.

Also  Visual Studio Web Essential 2012 package is a great way to work with LESS. It compiles your .LESS file and upon Save, you can see the CSS output next to your .LESS file.

Let’s take a look at simple example. And of course a real example (not foo, not bar)

In my site I have a CSS class block that have repeated twice like below..

pre

As you see these are styles for a link and should display different colors on the target link based on hover or not. Now if you were to change the font, you would have to change it in two places. With LESS you can introduce a variable which compiles into the same CSS sets.

pre1

This two classes can also be extracted into a maxin, and control the color from the calling CSS class.

premaxin

It is very much like functional programming! Now if we have to modify the styles they all in a single class.

Once you compile, you can see the generated CSS as below.

pregenerated

LESS makes very easier to work with CSS.