9

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

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

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

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

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

4

2 回答 2

5

根据帖子Reopen SASS Mixins，可以覆盖 mixins。但是，如果您在调用import "bootstrap";Bootstrap 中定义的之前定义了自定义的，则会覆盖它。另一方面，如果你把它放在导入之后，那么在你重新定义 mixin 时，所有的 Bootstrap 代码都已经完成编译（参见问题 #240和问题 #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";

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

于 2012-10-06T16:30:15.183 回答
0

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

所以最初你会 @import "bootstrap"; 这将引用 bootstrap.scss 文件，该文件然后将其所有依赖项与其他几个 @imports 行一起导入。我们希望我们的代码挂接到这个管道的中间以覆盖引导混合。我只是复制了 bootstrap.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";
于 2017-06-15T14:44:01.447 回答