Twitter引導 - 如何刪除梯度mixin的子類

我想在我的自定義主題中繼承.navbar-inner，但我不能指望一個非hackish的方式來禁用梯度（除了將兩個漸變顏色設置爲相同的顏色這似乎很髒）。任何想法如何可以重寫（禁用）從一個子類mixin少？Twitter引導 - 如何刪除梯度mixin的子類

來源

2012-07-04 pielgrzym

這就是你需要在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;必須使用多次重寫所有的供應商前綴。

remove gradient

來源

2012-07-04 20:28:13 baptme

這是否比單色漸變具有任何性能優勢？ :) – pielgrzym

@pielgrzym一個單一的顏色漸變覆蓋將做的伎倆。但沒有性能優勢或如此之小，你甚至無法注意到它。 – baptme

「background-image：none;必須多次使用才能覆蓋所有供應商前綴。」那是錯的！最後的勝利，所以一次就夠了。在你的例子中，你會在一行之前覆蓋5次你自己的定義。 – TLindig

社科院代碼：我添加背景顏色：透明和移動它變成一個混合

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

來源

2012-08-21 15:52:30 ScotterC

感謝您的解決方案。只是分享我想出了閱讀的答案後：

這是我使用刪除一個簡單的梯度SCSS：

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

請注意，您可以通過顏色的混入（需要在我的情況）：

@include remove_gradient(white);

還是讓它默認爲透明：

@include remove_gradient();

來源

2013-07-16 01:38:13 rafaelbiten

什麼它的價值這裏是一個少執行。引導文件mixin.less

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

來源

2014-02-11 02:25:35 Kieran

梯度由bootstrap_theme文件添加。

我真的不喜歡有這麼多背景圖像的想法。所以我的解決辦法是，如果你使用的是上海社會科學院或引導的LESS版本，只需通過以下行中原來存在_theme.scss

FROM

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

正如你可以看到，開始和結束點是相同的值，因此我們永遠不會看到漸變效果。簡單和乾淨。

來源

2015-03-04 09:49:28

Twitter引導 - 如何刪除梯度mixin的子類

回答

相關問題