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..


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.


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


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.


LESS makes very easier to work with CSS.


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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s