Question

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

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

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

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

是否有任何想法使其更易于维护？

Answer 1

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

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

Answer 2

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

所以最初你会@import“bootstrap”;这将引用bootstrap.scss文件，然后使用其他几个@imports行导入其所有依赖项。我们希望我们的代码挂钩到此管道的中间以覆盖bootstrap mixins。我只是复制了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";

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

2 个答案: