Bootstrap variable overriding with LESS

Solution 1:

Overriding variables after importing the original bootstrap.less works great for me:

@import "less/bootstrap.less";

@body-bg:     red;
@text-color:  green;
@link-color:  blue;

Compiling the above LESS source outputs properly customized Bootstrap CSS code.

Relevant info: http://lesscss.org/features/#variables-feature-lazy-loading

Solution 2:

I work on a similar project where we have bootstrap in a 'third-party' location and then override only mixins.less and variables.less. The pattern we use for this adds three files and doesn't touch bootstrap at all (allowing you to drop in replacements easily):

/style
|- bootstrap-master/
|    |- less/
|    |- js/
|   ...
|- shared/
    |- shared.less
    |- variables.less
    |- mixins.less

the mixins file

/*
 *    /style/shared/mixins.less
 */

@import "../bootstrap-master/less/mixins.less";
// override any mixins (or add any of your third party mixins here)

the variables file, which is where you would override grids

/*
 *    /style/shared/variables.less
 */

@import "../bootstrap-master/less/variables.less";

@gridColumns: 16; // let's pretend this is your site-specific override

The file which is actually imported (or fed through to a less compiler):

/*
 *    /style/shared/shared.less
 */

@import "variables.less";
@import "mixins.less";

@import "../bootstrap-master/less/grid.less";
//and any other bootstrap less files we need here

in my setup, if i do this, i get a css file with some weird .span15 values (since i didn't update @gridColumnWidth or @gridGutterWidth but the .row-fluid values actually work out just the way you'd expect them to since they're calculated by straightforward division).

I like this setup because i can cd into bootstrap-master and git pull and fetch new updates without having to merge any of my specific kludges (it also gives me a good handle on what i've actually overridden)

The other thing is that it's very clear that shared.less is only using grid.less (rather than all of bootstrap). This is intentional since in most instances you don't need all of bootstrap, just a few parts of it to get going. Most bootstrap less files at least are nice in that their only hard dependencies are shared.less and mixins.less

if this still isn't working, then maybe WinLess is getting confused