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

我对@merv 的回答采取了类似的方法，值得一提。这种方法不涉及编辑供应商代码，但会控制一些供应商代码。因此，如果将来更新引导程序，则需要考虑版本更改。

所以最初你会 @import "bootstrap";这将引用 bootstrap.scss 文件，该文件然后将其所有依赖项与其他几个 @imports 行一起导入。我们希望我们的代码挂接到这个管道的中间以覆盖引导混合。我只是复制了 bootstrap.scss 文件的全部内容并插入到我的 main.scss 文件中，然后将我的“自定义覆盖”放在：

main.scss

/*
    Import all scss files from here 
*/
@import "utils";
@import "fonts";
@import "variables"; 

/* 
    Bootstrap imports are being done here rather than importing bootstrap.scss so that mixins can be overridden

    If bootstrap is updated from the version below, ensure all imports are in sync with the new version
*/

/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

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

//************* CUSTOM OVERRIDES
@import "overrides";
//*************

// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
@import "bootstrap/glyphicons";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/dropdowns";
@import "bootstrap/button-groups";
@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
@import "bootstrap/jumbotron";
@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
@import "bootstrap/progress-bars";
@import "bootstrap/media";
@import "bootstrap/list-group";
@import "bootstrap/panels";
@import "bootstrap/responsive-embed";
@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
@import "bootstrap/popovers";
@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";

//******************** End of Bootstrap

@import "mixins";
@import "demo";
@import "logo";
@import "buttons";
@import "links";
@import "forms";

Answer 2

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

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

首先，注释掉_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";

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