Twitter bootstrap - как удалить градиентную смесь в подклассе

Я хочу подкласс .navbar-inner в моей настраиваемой теме, но я не могу понять, что это не хакерский способ отключить градиент (кроме установки цветов градиента в тот же цвет, который кажется грязным). Любая идея, как я могу переопределить (отключить) mixin из подкласса меньше?

Ответ 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; должен использоваться несколько раз, чтобы переопределить все префиксы поставщика.

Ответ 2

Для кода SASS: Я добавил фоновый цвет: прозрачный и переместил его в 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 версию 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));
  }
}

Как вы можете видеть, начальная и конечная точки имеют одинаковое значение, поэтому мы никогда не увидим эффект градиента. Простой и чистый.