如何重写引导混入，而无需修改实际的源代码？

Question

我使用的是引导4，我想更改按钮悬停和活动状态的默认样式。那些不能用，因为那些在萨斯混入的硬编码变量来改变。例如：

@mixin button-variant($color, $background, $border) {
  $active-background: darken($background, 10%);
  $active-border: darken($border, 12%);
  ...

为了得到我想要的风格，我需要改变变暗变亮，然后改变百分比。

我可以修改的源代码，但它听起来并不像维护一个很好的解决方案。我也可以覆盖这些值与我的自定义CSS文件中包含引导之后，但后来我基本上需要整个按钮源从引导复制粘贴并修改它。因为有很多按钮变种，就会出现很多替代这将是不必要的情况下，我可以包括改变来引导CSS的。

最好的解决办法是覆盖整个按钮变混入在引导编译之前，这样编译引导文件只存在CSS我想要的。什么是做到这一点的最好方法是什么？

Answer 1

通过包含在编译之前之后它自己的版本覆盖混入。

/伸出双手/site.伸出双手

// libraries
@import 'libraries/bootstrap/bootstrap';

// your custom sass files
@import 'overrides/bootstrap/mixins';

/伸出双手/overrides/bootstrap/迷信是.伸出双手

@mixin button-variant($color, $background, $border) {
  $active-background: darken($background, 10%);
  $active-border: darken($border, 12%);
  ...

Answer 2

覆盖使用后引导混入似乎并没有工作 - 这样的问题描述：https://github.com/sass/sass/issues/240

所以我结束了修改主引导程序的源文件。这是没有漂亮的解决方案，但由于所需的顺序是非常重要的。在我的情况下，它看起来像这样（“引导-萨斯/资产/样式表/引导”）：

/*!
 * Bootstrap v3.3.7
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT
 */

// Core variables and mixins
@import "own_variables";
@import "bootstrap-sass/assets/stylesheets/bootstrap/variables";
@import "bootstrap-sass/assets/stylesheets/bootstrap/mixins";
@import "own_mixins";

// ... rest of bootstrap includes which use the mixins to create classes

Answer 3

有没有需要修改现有的引导文件。

干净的解决方案，为我工作，是包括在我自己的自举custom.scss文件中的所有基地引导进口和交换原始_mixins.scss文件用我自己的，又包括所有原始混入与我的自定义_buttons.scss的例外。