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