Twitter bootstrap - làm thế nào để loại bỏ gradient mixin trong phân lớp

Question

Tôi muốn phân lớp .navbar-inner trong chủ đề tùy chỉnh của mình, nhưng tôi không thể tìm ra cách không hack để tắt gradient (ngoài việc đặt cả hai màu gradient thành cùng một màu mà có vẻ bẩn). Bất kỳ ý tưởng làm thế nào tôi có thể ghi đè (vô hiệu hóa) một mixin từ một phân lớp trong ít hơn ??

Answer 1

Đó là những gì bạn cần đạt được trong css để ghi đè tắt độ dốc.

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; phải được sử dụng nhiều lần để ghi đè lên tất cả các tiền tố nhà cung cấp.

Answer 2

Đối với mã Sass: tôi thêm background-color: minh bạch và chuyển nó thành một 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; 
} 

Bây giờ bạn chỉ có thể sử dụng

@include override_gradient_vertical(); 

Answer 3

Cảm ơn cho các giải pháp . Chỉ cần chia sẻ những gì tôi đã đưa ra sau khi đọc câu trả lời:

Đây là SCSS Tôi đang sử dụng để loại bỏ một gradient đơn giản:

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

Lưu ý rằng bạn có thể vượt qua một màu sắc để các mixin (là cần thiết về trường hợp của tôi):

@include remove_gradient(white); 

Hoặc để cho nó mặc định trong suốt:

@include remove_gradient(); 

Answer 4

cho những gì giá trị của nó dưới đây là ít triển khai hơn. tệp bootstrap mixin.less

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

Answer 5

Gradient được thêm bởi tệp bootstrap_theme.

Tôi thực sự không thích ý tưởng có quá nhiều hình nền. Vì vậy, giải pháp của tôi là nếu bạn đang sử dụng Sass hoặc phiên bản LESS của bootstrap, chỉ cần ghi đè lên dốc bởi những dòng sau ban đầu hiện diện trong _theme.scss

TỪ

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

ĐẾN

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

Như bạn có thể thấy, điểm bắt đầu và điểm kết thúc có cùng giá trị, do đó chúng ta sẽ không bao giờ thấy hiệu ứng gradient. Đơn giản và sạch sẽ.