Rails bootstrap-sass重新定义/重载mixins

Question

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

$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代码都已完成编译(请参阅问题#240和问题#420).未来可能会增加对后一种选择的支持.

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

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

// 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";

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