twbs/bootstrap — pull request #11696 by boennemann (2013-12-04 01:59:27+00:00)
Title: Take user defined vars into account

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](http://getbootstrap.com/customize/), 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:

```css
// 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.

```css
// 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.

```css
// 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?