Chris Schmitz Chris Schmitz - 1 year ago 148
CSS Question

Using bootstrap sass, some variables are not being overridden

I'm starting a new project and I'm using bootstrap-sass for the front end layout tool.

I'm trying to override some of the variables in bootstrap sass and while I can override some of them, other's aren't changing.

I created a simple template to look at each of the main color overrides as I change them:

<div class="well">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel panel-success">
<div class="panel-heading">
<div class="panel panel-warning">
<div class="panel-heading">
<div class="panel panel-danger">
<div class="panel-heading">
<div class="panel panel-info">
<div class="panel-heading">

And then in my scss entry point
I created my variable overrides and then imported bootstrap-sass:

$color1: #D800E5;
$color2: #010B3A;
$color3: #2300F5;
$color4: #FB0026;
$color5: #B34D30;
$color6: #FBFEFB;

$gray-base: green;
$gray-darker: lighten($gray-base, 13.5%);
$gray-dark: lighten($gray-base, 20%);
$gray: lighten($gray-base, 33.5%);
$gray-light: lighten($gray-base, 46.7%);
$gray-lighter: lighten($gray-base, 93.5%);

$brand-primary: darken($color1, 6.5%);
$brand-success: $color3;
$brand-info: orange; // i also tried using regular color assignments in case it was a variable issue. these don't work either
$brand-warning: green;
$brand-danger: yellow;

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

color: $color2;

When I review the template in browser, the primary-color override worked, but the gray override and the status based overrides did not:

example of issue

I'm still digging around in docs to figure out what I'm doing wrong, but I figured it may be obvious for someone who's more familiar with front end styling.

Answer Source

You are using the well class on the element you want to see in green instead of gray.

But the default color for well is defined as:

$well-bg:                     #f5f5f5 !default;
$well-border:                 darken($well-bg, 7%) !default;

So if you want to change the color of the well, you should change the color of $well-bg. If you want to see for what elements the $gray-base color is used, search for $gray in this file.

Edit by OP

Note that the names of the variables that you are looking to override are found in the file: _bootstrap-variables.scss.

If you're pulling in bootstrap-sass via npm (which I'm doing in this project) that file can be found at