覆盖引导程序的 sass 函数答案

【问题标题】：Overwrite sass function for bootstrap覆盖引导程序的 sass 函数
【发布时间】：2021-03-14 23:49:29
【问题描述】：

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

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

【问题讨论】：

标签： twitter-bootstrap sass bootstrap-5

【解决方案1】：

我找到了解决方案。首先，重新定义函数会覆盖它以前的行为。我的问题是，我插入了“引导”主 scss 文件，然后又插入了所有应该插入的文件，这导致了混乱。最后，在导入引导程序的functions 之后，我只需导入具有覆盖功能的自定义文件my_custom_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";
...

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

我已经实现了这个。我需要在不修改原始引导代码的情况下很好地集成它的方法。
所以你的问题不是如何覆盖函数，而是如何用Sass正确导入bootstrap，然后覆盖。
是的，但我认为它被称为覆盖，而不是覆盖:-) 覆盖是在使用继承时。