From af28d5554144c6ebaec1f9991df19de75d5317c6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Oct 2017 12:16:46 -0700 Subject: [PATCH] port latest from options for default vars --- docs/4.0/getting-started/theming.md | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index 5861058e90..4f201c88da 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -60,16 +60,22 @@ With that setup in place, you can begin to modify any of the Sass variables and ### Variable defaults -Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can override that default value in your own Sass even after that original variable's been defined. Copy and paste variables as needed, modify the values, remove the `!default` flag, and recompile. +Every Sass variable in Bootstrap 4 includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying Bootstrap's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap. -For example, to change out the `color` and `background-color` for the ``, you'd do the following: +Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap's Sass files. + +Here's an example that changes the `background-color` and `color` for the `` when importing and compiling Bootstrap via npm: {% highlight scss %} -$body-color: $gray-600; -$body-bg: $gray-900; +// Your variable overrides +$body-bg: #000; +$body-color: #111; + +// Bootstrap and its default variables +@import "node_modules/bootstrap/scss/bootstrap"; {% endhighlight %} -Do the same for any variable in `scss/_variables.scss` you need to override. +Repeat as necessary for any variable in Bootstrap, including the global options below. ### Maps and loops