Bootstrap setup: why should I use LESS?

Question

I am considering integrating LESS into my Bootstrap editor ( Bootply.com ) to match Bootstrap's best settings as well as mixins support.

However, I have yet to determine the specific benefits (performance, etc.) of using LESS over simple CSS overrides. It seems that at the end, LESS is compiled into CSS. It seems that LESS will simply introduce more support / recompilation tasks when new versions of Bootstrap are introduced.

Bootstrap is currently configured using Bootply by adding a custom "theme.css" after "bootstrap.css". So if you want to change the color of .navbar, I would just add a few lines to the theme.css theme, like ..

.navbar-custom .navbar-inner { background-color:#444444; } 

And then the markup looks like this:

 <div class="navbar navbar-custom navbar-fixed-top">.. 

If this is not the best practice for tuning, how does LESS improve it?

Answer 1

Less abstracts from CSS such things:

 background: #45484d; /* Old browsers */ background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #45484d 0%,#000000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #45484d 0%,#000000 100%); /* IE10+ */ background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ 

In your case, the navigation bar has a gradient, so you cannot just change the background color. If you use LESS, you can choose two colors, and somewhere in the Bootstrap CSS files, what looks like the above clutter will automatically update.