Take user defined vars into account

Created by: boennemann

I always wanted to consume bootstrap and customize it right inside of my own project without touching the original source files. I know there is something like the custom build generator, but it's not flexible, because the output is compiled css. If I change my mind and want to change that one variable I have to fill out the entire form again. So what I did up until now is simply copying the less/bootstrap.less file, adapting the modules' paths and importing my own variables file after the original one, but then I'm touching the original source files, which is bad.

A great start would be if bootstrap could take user defined variables into account. A change as simple as the one I'm proposing would allow the following:

// works
@body-bg: gold;
@import "bower_components/bootstrap/less/bootstrap";

But there is a problem, let's say I'm changing @brand-primary. It wouldn't have an effect at all, because the variable is never used directly, but only abstract (e.g. @component-active-bg: @brand-primary;) and so it always refers to the variable's default value.

// no effect
@brand-primary: gold;
@import "bower_components/bootstrap/less/bootstrap";

Of course we could sort the variables by their dependencies and load them one after another, but that would make the code unreadable and unmaintainable.

// ugly
.default-variables() {
  @import "variables.less";
}
.default-variables;
.default-variables-2() {
  @import "variables-2.less";
}
.default-variables-2;
// etc.

So in the end the pull-request only allows to overwrite specific variables, which is confusing and unexpected behavior. Rather than trashing my attempt I want to put it up for discussion.

• Does this bring more benefits than cost?
• How could this be solved more elegantly?
• Should this be solved at all?