在bootstrap中創建四個顏色漸變mixin

Question

我只是想使用bootstrap mixin函數創建兩個顏色漸變。所以我的梯度應該是這樣的：

使用引導梯度混入時，我發現沒有任何功能，以配合我的要求。所以我嘗試製作我自己的漸變混色並將其添加到bootstrap/less/mixins/grandients.less。但我的功能並沒有做好自己的工作..

這是梯度混入我加入gradients.less

.vertical-custom(@start-color: #ed3537; @start-percent: 0%; @mid-color: #ed3537; @color-stop: 50%; @mid-color-2: #fb3e40; @color-stop-2: 50%; @end-color: #fb3e40; @end-percent: 100%) { 
    background-image: -webkit-linear-gradient(top, @start-color @start-percent, @mid-color, @color-stop, @mid-color-2, @color-stop-2, @end-color @end-percent); // Safari 5.1-6, Chrome 10+ 
    background-image: -o-linear-gradient(top, @start-color @start-percent, @mid-color, @color-stop, @mid-color-2, @color-stop-2, @end-color @end-percent); // Opera 12 
    background-image: linear-gradient(to bottom, @start-color @start-percent, @mid-color, @color-stop, @mid-color-2, @color-stop-2, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ 
    background-repeat: repeat-x; 
    //filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down 
    } 

我這樣稱呼它

#gradient.vertical-custom(@start-color: #ed3537; @start-percent: 0%; @mid-color: #ed3537; @color-stop: 50%; @mid-color-2: #fb3e40; @color-stop-2: 50%; @end-color: #fb3e40; @end-percent: 100%); 

當我直接添加純CSS到我的LESS文件它爲我工作。但我正在尋找一個創建漸變mixin的解決方案。

這是我的梯度純CSS：

background: #ed3537; 
background: -moz-linear-gradient(top, #ed3537 0%, #ed3537 50%, #fb3e40 50%, #fb3e40 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed3537), color-stop(50%,#ed3537), color-stop(50%,#fb3e40), color-stop(100%,#fb3e40)); 
background: -webkit-linear-gradient(top, #ed3537 0%,#ed3537 50%,#fb3e40 50%,#fb3e40 100%); 
background: -o-linear-gradient(top, #ed3537 0%,#ed3537 50%,#fb3e40 50%,#fb3e40 100%); 
background: -ms-linear-gradient(top, #ed3537 0%,#ed3537 50%,#fb3e40 50%,#fb3e40 100%); 
background: linear-gradient(to bottom, #ed3537 0%,#ed3537 50%,#fb3e40 50%,#fb3e40 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed3537', endColorstr='#fb3e40',GradientType=0); 

希望有人可以幫助我。 謝謝。

Answer 1

Bootstrap的漸變名稱空間（請參閱：http://lesscss.org/features/#features-overview-feature-namespaces-and-accessors），可以在less/mixins/gradients.less文件中找到。

一個命名空間中混入應該叫如下：

#namespace > mixin(); 

的>在這個調用可選。

Bootstrap在#gradient命名空間中爲您提供了一個.vertical-three-colors() mixin，它與您的純CSS最匹配。

div.gradient { 
#gradient > .vertical-three-colors(#ed3537; #fb3e40; 50%; #fb3e40;); 
} 

前面的輸出：

div.gradient { 
    background-image: -webkit-linear-gradient(#ed3537, #fb3e40 50%, #fb3e40); 
    background-image: -o-linear-gradient(#ed3537, #fb3e40 50%, #fb3e40); 
    background-image: linear-gradient(#ed3537, #fb3e40 50%, #fb3e40); 
    background-repeat: no-repeat; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffed3537', endColorstr='#fffb3e40', GradientType=0); 
} 

演示：http://codepen.io/bassjobsen/pen/ogjeJE

應該按如下步驟（例如在您bootstrap.less文件的末尾）稱這種混入注意你的純CSS支持比Bootstrap的mixin更多的瀏覽器。取決於你編譯引導的方式。默認的構建過程會生成上面的輸出。

當您編譯lessc --autoprefix="last 20 versions" grsdient.less以下更少的代碼：

div.gradient { 
    background-color: #ed3537; 
    background-image: linear-gradient(#ed3537, #fb3e40 50%, #fb3e40); 
    background-repeat: no-repeat; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffed3537', endColorstr='#fffb3e40', GradientType=0); 
} 

將輸出：

div.gradient { 
    background-color: #ed3537; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ed3537), color-stop(50%, #fb3e40), to(#fb3e40)); 
    background-image: -webkit-linear-gradient(#ed3537, #fb3e40 50%, #fb3e40); 
    background-image: -moz-linear-gradient(#ed3537, #fb3e40 50%, #fb3e40); 
    background-image: -o-linear-gradient(#ed3537, #fb3e40 50%, #fb3e40); 
    background-image: linear-gradient(#ed3537, #fb3e40 50%, #fb3e40); 
    background-repeat: no-repeat; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffed3537', endColorstr='#fffb3e40', GradientType=0); 
} 

的-ms-linear-gradient前綴只針對IE10的開發者版本，也沒有必要使用在您的生產代碼中。

當然，你也可以寫自己混入其輸出完全一樣，你純粹的CSS：

.vertical-custom(@start-color: #ed3537; @start-percent: 0%; @mid-color: #ed3537; @color-stop: 50%; @mid-color-2: #fb3e40; @color-stop-2: 50%; @end-color: #fb3e40; @end-percent: 100%) 
{ 
background: @start-color; 
background: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @mid-color-2 @color-stop-2, @end-color @end-percent); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(@start-percent,@start-color), color-stop(@color-stop,@mid-color), color-stop(@color-stop-2,@mid-color-2), color-stop(@end-percent,@end-color)); 
background: -webkit-linear-gradient(top, @start-color @start-percent,@mid-color @color-stop,@mid-color-2 @color-stop-2,@end-color @end-percent); 
background: -o-linear-gradient(top, @start-color @start-percent,@mid-color @color-stop,@mid-color-2 @color-stop-2,@end-color @end-percent); 
background: -ms-linear-gradient(top, @start-color @start-percent,@mid-color @color-stop,@mid-color-2 @color-stop-2,@end-color @end-percent); 
background: linear-gradient(to bottom, @start-color @start-percent,@mid-color @color-stop,@mid-color-2 @color-stop-2,@end-color @end-percent); 
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); 
} 

現在下面的代碼：

div.gradient { 
.vertical-custom(); 
} 

輸出：

div.gradient { 
    background: #ed3537; 
    background: -moz-linear-gradient(top, #ed3537, #ed3537 50%, #fb3e40 50%, #fb3e40 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ed3537), color-stop(50%, #ed3537), color-stop(50%, #fb3e40), color-stop(100%, #fb3e40)); 
    background: -webkit-linear-gradient(top, #ed3537 0%, #ed3537 50%, #fb3e40 50%, #fb3e40 100%); 
    background: -o-linear-gradient(top, #ed3537 0%, #ed3537 50%, #fb3e40 50%, #fb3e40 100%); 
    background: -ms-linear-gradient(top, #ed3537 0%, #ed3537 50%, #fb3e40 50%, #fb3e40 100%); 
    background: linear-gradient(to bottom, #ed3537 0%, #ed3537 50%, #fb3e40 50%, #fb3e40 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffed3537', endColorstr='#fffb3e40', GradientType=1); 
} 

演示：http://codepen.io/bassjobsen/pen/LEpzEm

確保.vertical-custom混入已經在gradients.less文件#gradient命名空間中添加時#gradient > .vertical-custom();