Bootstrap 3 and LESS

Bootstrap 4 compared to Bootstrap 3 has not changed in terms of directory/file structure. What changed is the abandonment of the LESS preprocessor.

Well, I'm glad of this decision but there's one huge difference between Sass and Less in how they treat variables.

Overriding and referencing Bootstrap 4 Sass variables

LESS has something called lazy variable evaluation.

Let's say I need to override variables in bootstrap/scss/_variables.scss and at the same time reference those that are declared in it.

Simple example:

$mycolor: #f4f9f1;
$body-bg: $mycolor;
$body-color: $grey-900;

This does not compile because $grey-900 does not exist yet. It can be solved by declaring $grey-900 inside our own overrides. But that means we have to check what constant Bootstrap uses for grey-900 each time bootstrap is updated.

In v3 LESS implementation it wasn't even an issue to reference an existing variable from variables.less -- because of that lazy variable evaluation. Now in v4, in order to reference an existing variable the whole _bootstrap.scss must be copied and pasted into project's directory:

// _my-bootstrap.scss
/*
 * Bootstrap v4.0.0-beta.2
 */
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';

@import 'custom-variables';

@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/root';
@import '~bootstrap/scss/print';
...

Here we import the required _functions.scss and _variables.scss then import our _custom-variables.scss and then the rest.

The drawback is obvious -- now after every update one will have to compare the _my-bootstrap.scss file with the _bootstrap.scss and apply the differences because optional components could be added/renamed/deprecated/removed.

The solution (rejected)

I've made a proposal in form of a Pull Request https://github.com/twbs/bootstrap/pull/24802 The idea is to split the monolith boostrap.scss into two separate stylesheets -- required and optional. Unfortunately, it was declined by @mdo without explanation, IDK why. Is Mark Otto the only one who makes architectural decisions? IDK.

If the PR would be merged, a user would be able to easily override the variables by including only two files from node_modules:

@import "~bootstrap/scss/bootstrap-required";
@import "custom-variables";
@import "~bootstrap/scss/bootstrap-optional";

In case of a small project -- when there's no need to reference existing variables -- one can always go with the old way, leveraging the !default feature of Sass.

@import "custom-variables";
@import "~bootstrap/scss/bootstrap";

It could be a win-win solution for any kind of projects

In the Getting started with theming section of the documentation, there's already a clear separation between Required and Optional stylesheets.

Another solution exists?

Maybe I'm the only one who needs to reference existing variables or maybe there's another solution exists that I'm not aware of?