Twitter Bootstrap - wie Gradienten-Mixin in Unterklasse zu entfernen

Question

Ich möchte in meinem benutzerdefinierten Thema .navbar-innere Unterklasse, aber ich kann nicht eine nicht-hackish Weg zum Deaktivieren von Farbverlauf (abgesehen von beiden Farbverlauf Farben auf die gleiche Farbe einstellen was schmutzig scheint). Irgendeine Idee, wie kann ich ein Mixin von einer Unterklasse in weniger überschreiben?

Answer 1

Das ist, was Sie in CSS erreichen müssen, um den Gradienten zu überschreiben deaktivieren.

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; muss mehrmals verwendet werden, um alle Anbieter Präfixe außer Kraft zu setzen.

Answer 2

Für SASS Code: Ich habe background-color: transparent und zog sie in eine 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; 
} 

Jetzt nur noch du

@include override_gradient_vertical(); 

Answer 3

Danke für die Lösung nutzen können . Nur zu teilen, was ich kam mit nach den Antworten zu lesen:

Dies ist SCSS ich eine einfache Steigung entfernen bin mit:

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

Beachten Sie, dass Sie eine Farbe an die mixin passieren können (war notwendig auf meinem Fall):

@include remove_gradient(white); 

Oder lassen sie es auf transparenten Standard:

@include remove_gradient(); 

Answer 4

für das, was ihren wert Hier ist eine weniger Implementierung. Bootstrap-Dateien mixin.less

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

Answer 5

Gradient durch die bootstrap_theme Datei hinzugefügt wird.

Ich mochte wirklich nicht die Idee, so viele Hintergrundbilder zu haben. Also meine Lösung ist, wenn Sie SASS oder weniger Version von Bootstrap verwenden, nur Gradienten verändert werden, indem die folgenden Zeilen ursprünglich in _theme.scss

VON

.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)); 
    } 
} 

TO

.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)); 
    } 
} 

Wie Sie kann sehen, der Anfangs- und Endpunkt sind der gleiche Wert, daher würden wir nie den Gradienteneffekt sehen. Einfach und sauber.