ruby-on-rails - Rails bootstrap-sass 重新定义/重载 mixins

Question

使用 bootstrap-sass，您可以通过在导入 bootstrap 之前定义变量来重载变量(如文档中所示):

$btnPrimaryBackground: #f00;
@import "bootstrap";

遗憾的是，它不适用于 mixins，因为在 SASS 中它们可以重新定义/重载。

重载 twitter bootstrap mixins 的最佳方法是什么？到目前为止，唯一的方法似乎是克隆 lib 中的 gem 并添加修改 _mixins.scss 或在之后包含我的自定义 _mixins.scss。

有什么想法可以使它更易于维护吗？

Answer 1

根据帖子，Reopen SASS Mixins , 可以覆盖 mixins。但是，如果您在调用 import "bootstrap"; 之前定义了自定义在 Bootstrap 中定义的将覆盖它。另一方面，如果你把它放在导入之后，那么在你重新定义 mixin 时，所有的 Bootstrap 代码都已经编译完成了(参见 Issue #240 和 Issue #420 )。将来可能会增加对后一种选项的支持。

在那之前，我能想到的一个选项(尚未测试)是从 中分离出变量和混合。 _bootstrap.scss 以便您可以在使用前重新定义 mixins。

首先，注释掉 中的前两个 import 语句。 _bootstrap.scss :

// Core variables and mixins
//@import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
//@import "bootstrap/mixins";

然后在导入 Bootstrap 的 SASS 文件中，应将其更改为包含以下内容:

$btnPrimaryBackground: #f00;

// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Override of mixin for form field states
@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
  // customization here
}

@import "bootstrap";

在此工作流程下，您仍将编辑供应商文件，但至少您可以将其限制为仅注释掉的几行。