4種顏色的自舉漸變

Question

我已經使用4種顏色來創建css漸變，就像這樣。

background: linear-gradient(to right, #ffffff 0%,#ffffff 72%,#929292 72%,#929292 100%); 

這裏我使用引導程序。我的問題是我如何在我的少文件中調用這種漸變？

如果在梯度中有2或3種顏色，對我來說就沒問題。那麼我可以用引導的mixin功能可按這樣的..

#gradient.vertical(#ffffff; #f9f9f9); 
#gradient.vertical-three-colors(#ffffff; #f9f9f9; 72%; #e7eaef); 

，但我不知道如何使用超過3種顏色使用它..

希望有人可以幫助我。

謝謝。

Answer 1

只是讓你自己四通梯度混入，並把它添加到引導/更少/混入/ grandients.less

如：

.horizontal-four-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 33%; @mid-color-2: #abcdef; @color-stop-2: 66%; @end-color: #c3325f) { 
    background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @mid-color-2 @color-stop-2, @end-color); 
    background-image: -o-linear-gradient(left, @start-color, @mid-color @color-stop, @mid-color-2 @color-stop-2,@end-color); 
    background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @mid-color-2 @color-stop-2, @end-color); 
    background-repeat: no-repeat; 
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback 
    } 

與

#gradient.horizontal-four-colors(#ffffff; #f9f9f9; 33%; #bbb, 66%, #e7eaef);