Overwrite sass function for bootstrap

user_4070660 0
Viewed 606

I am trying to modify bootstrap 5 function color-contrast. I want it to sometimes return hardcoded values based on $background parameter. I can do that just by modifying function itself, but since I have bootstrap in node_modules, I want to avoid it and to somehow overwrite this function in my custom code.

How do I overwrite function with my own in sass? Or how to solve this otherwise?

bootstrap-5 twitter-bootstrap sass
2 Answers

I found the solution. First of all redefining function overwrites it's previous behaviour. My problem was, that I was inserting "bootstrap" main scss file and then again all the files, that were supposed to be inserted and that caused chaos. In the end I just import my custom file my_custom_functions with overwritten function after importing functions of bootstrap, then the rest of it. For example:

@import "functions";
//here
@import "my_custom_functions";

@import "variables";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
...
user_40706600

This function will generate some class depending on colors defined by your variables. I suppose you could create your own function based on the same loop to override its behavior.

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    /* Add the behavior you want */
  }
}

Then, sass knows how to organize your code, you don't loose the initial behavior, but you can extend it.

user_126686920
Related