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