Bootstrap Customization: Why should I use LESS?

Question

I'm considering integrating LESS in my Bootstrap editor (Bootply.com) to conform to Bootstrap customization best practices, and support for mixins.

However, I've yet to determine the specific advantages (performance and otherwise) of using LESS over simple CSS overrides. It seems that in the end LESS is compiled to CSS. It seems like LESS will just introduce more maintainence/recompiling tasks as new versions of Bootstrap are introduced.

I know that Bootstrap customization can be done using a custom 'theme.css' after the 'bootstrap.css'. So if you want to change the .navbar color I would just add a few lines to 'theme.css' like..

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

And then the markup looks like:

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

If this is not a best practice for customization, how does LESS improve on it?

Answer 1

LESS abstracts away CSS messes like this:

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 navbar has a gradient, so you cannot simply change the background color. If you use LESS, you can pick two colors, and somewhere inside Bootstrap's CSS files, something that looks like the above mess will be updated automatically.