Twitter bootstrap - 如何删除子类中的渐变混合答案

【问题标题】：Twitter bootstrap - how to remove gradient mixin in subclassTwitter bootstrap - 如何删除子类中的渐变混合
【发布时间】：2012-07-05 04:44:33
【问题描述】：

我想在我的自定义主题中将 .navbar-inner 子类化，但我想不出一种非 hackish 的方式来禁用渐变（除了将两种渐变颜色设置为看起来很脏的相同颜色）。知道如何在 less 中覆盖（禁用）子类中的 mixin 吗？

【问题讨论】：

标签： twitter-bootstrap less css

【解决方案1】：

这就是你需要在 css 中实现的，以覆盖禁用渐变。

CSS：

.navbar-inner {
  background-color: #2c2c2c; 
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-repeat: no-repeat;
  filter: none;
}

background-image: none; 必须多次使用才能覆盖所有供应商前缀。

【讨论】：

与实际使用单色渐变相比，这是否具有任何性能优势？ :)
@pielgrzym 使用单一颜色渐变的覆盖就可以了。但是没有性能优势或者那么小，你甚至都没有注意到它。
"background-image: none; 必须多次使用才能覆盖所有供应商前缀。"那是错的！最后的胜利，所以一次就足够了。在您的示例中，您在前一行覆盖了 5 次您自己的定义。
@TLindig 所说的。如果你只是一遍又一遍地重复相同的声明，它就没有效果。只会应用最后一个。要覆盖供应商前缀声明，您实际上必须使用该确切属性（例如-webkit-box-shadow）。

【解决方案2】：

对于 SASS 代码：我添加了 background-color:transparent 并将其移动到 mixin 中

@mixin override_gradient_vertical() {
  background-color:transparent;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-repeat: no-repeat;
  filter: none;
}

现在你可以使用

@include override_gradient_vertical();

【讨论】：

【解决方案3】：

感谢您的解决方案。只是分享我在阅读答案后的想法：

这是我用来移除简单渐变的 SCSS：

@mixin remove_gradient($color:transparent) {
    background-color:$color;
    background-image: none;
    background-repeat: no-repeat;
    filter: none;
}

请注意，您可以将颜色传递给 mixin（在我的情况下需要）：

@include remove_gradient(white);

或者让它默认为透明：

@include remove_gradient();

【讨论】：

【解决方案4】：

因为它的价值在于 较少的实现。引导文件 mixin.less

#gradient{
    .remove(@color: transparent) {
        background-color:@color;
        background-image: none;
        background-repeat: no-repeat;
        filter: none;
    }
}

【讨论】：

【解决方案5】：

渐变由 bootstrap_theme 文件添加。

我真的不喜欢没有这么多背景图像的想法。所以我的解决方案是，如果您使用的是 SASS 或 LESS 版本的引导程序，只需通过 _theme.scss 中最初存在的以下行覆盖渐变

来自

.navbar-default {
  @include gradient-vertical($start-color: lighten($navbar-default-bg, 10%), $end-color: $navbar-default-bg);
  @include reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
  border-radius: $navbar-border-radius;
  $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
  @include box-shadow($shadow);

  .navbar-nav > .active > a {
    @include gradient-vertical($start-color: darken($navbar-default-bg, 5%), $end-color: darken($navbar-default-bg, 2%));
    @include box-shadow(inset 0 3px 9px rgba(0,0,0,.075));
  }
}

到

.navbar-default {
  @include gradient-vertical($start-color: $navbar-default-bg, $end-color: $navbar-default-bg);
  @include reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered

  $shadow: inset 0 0px 0 rgba(255,255,255,.15), 0 0px 0px rgba(0,0,0,.075);
  @include box-shadow($shadow);

  .navbar-nav > .active > a {
    @include gradient-vertical($start-color: $navbar-default-bg, $end-color: $navbar-default-bg);
    @include box-shadow(inset 0 0px 0px rgba(0,0,0,.075));
  }
}

如您所见，起点和终点是相同的值，因此我们永远不会看到渐变效果。简单干净。

【讨论】：