Twitter bootstrap - cómo eliminar degradado mixin en la subclase

Question

Quiero subclase .navbar-inner en mi tema personalizado, pero no puedo imaginar una forma no hackish para desactivar el degradado (además de establecer ambos colores degradados al mismo color que parece sucio). ¿Alguna idea de cómo puedo anular (desactivar) un mixin de una subclase en menos?

Answer 1

Eso es lo que necesita lograr en css para anular la desactivación del degradado.

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; tiene que ser utilizado varias veces para anular todos los prefijos de proveedores.

Answer 2

Para el código de SASS: he añadido background-color: transparente y se trasladaron en un 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; 
} 

Ahora puedes usar

@include override_gradient_vertical(); 

Answer 3

Gracias por la solución . Sólo compartir lo que me ocurrió después de leer las respuestas:

Ésta es la SCSS que estoy usando para remover un gradiente simple:

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

Tenga en cuenta que se puede pasar de un color a la mixin (que se necesitaba en mi caso):

@include remove_gradient(white); 

o dejar que por defecto a transparente:

@include remove_gradient(); 

Answer 4

por lo que su valor aquí hay un menos implementación. archivos de arranque mixin.less

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

Answer 5

Gradiente se añade por el archivo bootstrap_theme.

Realmente no me gustó la idea de tener tantas imágenes de fondo como ninguna. Así que mi solución es si está utilizando o SASS versión menos de arranque, simplemente anular degradado por las siguientes líneas originalmente presentes en _theme.scss

DE

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

A

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

Como puede ver, el punto de inicio y el punto final tienen el mismo valor, por lo que nunca veríamos el efecto degradado. Simple y limpio.