twitter-bootstrap - 覆盖引导程序的 sass 函数

Question

我正在尝试修改 bootstrap 5 功能color-contrast。我希望它有时根据$background参数返回硬编码值。我可以通过修改函数本身来做到这一点，但由于我有引导程序node_modules，我想避免它并以某种方式在我的自定义代码中覆盖这个函数。

如何在 sass 中用自己的函数覆盖函数？或者如何解决这个问题？

Answer 1

我找到了解决方案。首先，重新定义函数会覆盖它以前的行为。我的问题是，我插入了“引导”主 scss 文件，然后又插入了所有应该插入的文件，这导致了混乱。最后，我只是在导入引导程序my_custom_functions后导入具有覆盖功能functions的自定义文件，然后导入其余部分。例如：

@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";
...

Answer 2

此函数将根据您的变量定义的颜色生成一些类。我想您可以基于相同的循环创建自己的函数来覆盖其行为。

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

然后，sass 知道如何组织你的代码，你不会失去最初的行为，但你可以扩展它。