41

I'm using Twitter Bootstrap on a project at the moment, including the LESS files and compiling with some additional LESS code that we've written.

The latest release has meant we need to override some of the Bootstrap LESS variables. One option here was to maintain a modified copy of Bootstrap which we patch on each release.

But I note that it's possible to override a variable defined in an @import LESS file by re-declaring the variable after the import statement.

E.g.:

@import "twitter-bootstrap/bootstrap.less";
// Restore base font size to pre 2.1.1 defaults
@baseFontSize:          13px;
// Add some custom LESS code here

Is this bad practice? Is it an artifact of the way the LESS compiler works, or an intended part of it? I couldn't find much information on this, although I did find the following two references:

Because of a bug in the Less compiler, you can override the “constant” value of a variable by changing it after it is initially declared.

http://rubysource.com/how-to-customize-twitter-bootstrap%E2%80%99s-design-in-a-rails-app

and

Customize the columns and gutters by overriding these three variables (after the grid.less import has been declared).

http://semantic.gs/

The LESS site itself says that variables are 'constants':

http://lesscss.org/

Note that variables in LESS are actually ‘constants’ in that they can only be defined once.

But then I see other sites using this approach.. It's certainly easier than maintaining a vendor branch and seems to work fine with less.js.

Would appreciate any thoughts on whether this is a bad thing to do or not!

Community
  • 1
  • 1
sync
  • 5,350
  • 2
  • 23
  • 32
  • 1
    There are some tickets: https://github.com/cloudhead/less.js/issues/297 and https://github.com/cloudhead/less.js/issues/905 – Christoph Leiter Oct 17 '12 at 09:44
  • Thanks, should have looked there - useful. Although my question still stands as neither of those issues had any resolution. – sync Oct 19 '12 at 08:53

2 Answers2

46

Ok! One of the above issues led to a discussion of the intended behaviour, and it turns out that overriding LESS variables is fine.

Your declarations will overwrite each-other in the same scope in CSS; The same is true for LESS.

https://github.com/cloudhead/less.js/issues/297

Like in CSS, overriding within a scope is an intended way to use LESS.

sync
  • 5,350
  • 2
  • 23
  • 32
6

It´s ok!

I usually create a less file with "components" and variables with a default value. Then I import after that a file with same variables but "customers" values, overwritting default ones. In that way i have only to change some values to create a new design for each customer.

It´s ok and very useful.

kurroman
  • 978
  • 10
  • 12