Twitter引导程序 - 如何删除子类中的梯度mixin

Question

我想在我的自定义主题中继承.navbar-inner，但是我无法想象一种非hackish方式来禁用渐变（除了将两种渐变颜色都设置为看起来很脏的相同颜色）。任何想法如何在less ??

中覆盖（禁用）子类中的mixin

Answer 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;来覆盖所有供应商前缀。

Answer 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();

Answer 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();

Answer 4

这里的价值在于较少的实现。 bootstrap文件mixin.less

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

Answer 5

bootstrap_theme文件添加了渐变。

我真的不喜欢有这么多背景图像的想法。所以我的解决方案是如果你使用SASS或LESS版本的bootstrap，只需通过_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));
  }
}

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