Implements a _custom.scss, resolves #17322 and to-do on #17021

[stephaniepurvis]

I added a _custom.scss file and added it to the bootstrap.scss file to be compiled for user customizations to variables. This resolves issue #17322 that was closed and added as a to-do on #17021. The to-do states "Consider implementing a _custom.sccss for easier, built-in variable overrides?"

[johnwheeler]

custom appears after variables but the variables in variables are defined using !default

When I try to override them like (in _custom.scss)

$font-family-sans-serif: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;

I also have override any dependent variables in _custom.scss or it won't work e.g.

$font-family-sans-serif: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-base: $font-family-sans-serif;

I am new to sass - so I apologize if this is redundant, but is this the expected behavior?

The only way I can get it to work without having to redefine dependent variables is by putting custom above variables.

Please also see http://www.saltycrane.com/blog/2015/02/customizing-bootstrap-sass-version-using-grunt-and-bower/#customize-bootstrap

[stephaniepurvis]

@johnwheeler I believe you are right and this will be much more efficient for users. I have updated my commit so that 'custom' comes before 'variables' in the boostrap.scss file. Thank you for your feedback!

[AndersSahlin]

Is this PR going to end up in alpha 3? Right now our team has an awkward build step for injecting the @include line in the main scss file, before building Bootstrap.

Otherwise I suggest updating the comment in _variables.scss:

// Variables
//
// Copy settings from this file into the provided `_custom.scss` to override
// the Bootstrap defaults without modifying key, versioned files.

[mdo]

I think it could end up in v4, I just haven't had time to try it out :).

[hoppy-kamper]

Thanks for this pull request @stephaniepurvis - now I know why I couldn't find _custom.scss in the alpha.2 build. Just a sanity check question - should the following also be added to bootstrap-reboot.scss as well?

// Bootstrap Reboot only
//
// Includes only Normalize and our custom Reboot reset.

@import "custom" // Add this line??
@import "variables";
@import "mixins/hover";
@import "mixins/tab-focus";

@import "normalize";
@import "reboot";

[mdo]

Included the import in the other bundles in 567a0e9.

Thanks!