Do custom Bootstrap 4 variables fail to cascade downwards?

Question

Do custom Bootstrap 4 variables fail to cascade downwards?

Discovering a strange behavior in the custom.scss file of Bootstrap, I realized that setting a custom color and removing the !default flag doesn't cascade down as expected. For example, updating $blue to #000 without !default in _custom.scss should ideally affect all variables referencing it. However, after testing this out with $brand-primary and $btn-primary-bg in _variables.scss, I found out that each variable needs to be explicitly mentioned in the custom.scss file without the !default flags for the changes to take effect.

This means instead of simply defining $blue: #000000; in the custom.scss file, one would have to list all related variables like:

$blue: #000000;
$brand-primary: $blue;
$btn-primary-bg: $brand-primary;

Is there something I'm overlooking here? Shouldn't setting the custom color once automatically update all linked variables? This current process seems quite inefficient to me.

css twitter-bootstrap sass bootstrap-4

Answer 1

Answer №1

[click here for more information][1]The variables are defined correctly, but the issue may lie in how you are using them in your HTML. Take a look at the example below, which shows how to use the variables as you have defined them. I recommend removing the "$blue" variable and setting the color directly for the "$brand-primary" variable!

[1]: https://jsfiddle.net/negin/t36ep4e8/

Answer 2

[click here for more information][1]The variables are defined correctly, but the issue may lie in how you are using them in your HTML. Take a look at the example below, which shows how to use the variables as you have defined them. I recommend removing the "$blue" variable and setting the color directly for the "$brand-primary" variable!

[1]: https://jsfiddle.net/negin/t36ep4e8/

Answer 3

Answer №2

$shades: (
   $dark-blue: #000000 ;
)

Utilizing mixins can simplify the process significantly

@mixin shade-modifiers($property) {
  @each $name, $hex in $shades {
    &-#{$name} {
      #{$property}: $hex !important;
    }
  }
}

.text {
  @include shade-modifiers(color);
}

.bg {
  @include shade-modifiers(background-color);
}

Afterwards, simply include the class .text-dark-blue or .bg-dark-blue

Answer 4

$shades: (
   $dark-blue: #000000 ;
)

Utilizing mixins can simplify the process significantly

@mixin shade-modifiers($property) {
  @each $name, $hex in $shades {
    &-#{$name} {
      #{$property}: $hex !important;
    }
  }
}

.text {
  @include shade-modifiers(color);
}

.bg {
  @include shade-modifiers(background-color);
}

Afterwards, simply include the class .text-dark-blue or .bg-dark-blue

Do custom Bootstrap 4 variables fail to cascade downwards?

Answer №1

Answer №2

Similar questions

Instructions for creating a scrollable unordered list when it reaches its maximum capacity

What is the best way to apply a class for styling my JavaScript code in CSS? I'm having trouble getting classList

What are the steps for integrating personalized Bootstrap themes into your Heroku application?

Attempting to align the dropdown menu to the left side

Adding a class to an element within a React template using JS is not possible

My custom style sheet not taking precedence over Bootstrap styles

Expand the div to fit 100% width inside the Blueprint container

Display a series of numbers in a stylish Bootstrap button with uniform dimensions

What is the best way to deactivate div elements once an overlay has been applied to them?

Centered Fixed Upward Scrolling Div

Tips for repairing a button using a JavaScript function in an HTML document

JavaScript incorporates input range sliding, causing a freeze when the mouse slides rapidly

Using jQuery to create animated effects for hidden input fields

Bar graph constructed using a pair of div elements

Is it advisable to utilize media queries and transform: translateY(-%) to position content above the mobile keyboard?

List of prices with a dotted line separating the price and product, adjusting its width based on

Adjusting the size of the entire webpage using Bootstrap 5

Vue Template ref Error: Unable to access scrollHeight property of null object

Tips for Avoiding Line Breaks in CSS Divs

What is the reason for font names appearing yellow rather than blue in the "font-family" property?