8

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?

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 2
    Just to clarify: are you asking about the [benefits of LESS in general](http://coding.smashingmagazine.com/2010/12/06/using-the-less-css-preprocessor-for-smarter-style-sheets/), or using LESS in your specific configuration? – Christian May 09 '13 at 12:45
  • I think a little of both, but more about using LESS specifically for Bootstrap.css customization. – Carol Skelly May 09 '13 at 12:48

1 Answers1

12

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.

woz
  • 10,888
  • 3
  • 34
  • 64
  • Thanks, so is there a way to use LESS and compile the overrides into a separate 'theme.css' file -- or it could only be done by having custom build 'bootstrap.css'? – Carol Skelly May 09 '13 at 13:30
  • 1
    You have to choose to either use Bootstrap as plain CSS or Bootstrap with LESS. You will find things like `.border-radius(@baseBorderRadius);` in a LESS file where values are plugged in. Have a look at [navbar.less](https://github.com/twitter/bootstrap/blob/master/less/navbar.less) to see what I mean. So no, you can't compile to a separate file when using Bootstrap. – woz May 09 '13 at 13:36
  • Okay.. I will need to think about implementing LESS further. You're answer has helped to clarify. – Carol Skelly May 10 '13 at 02:20