在引导程序中创建四个颜色渐变混合 [英] Create four color gradient mixin in bootstrap

问题描述

我只想使用bootstrap mixin函数创建两个颜色渐变.所以我的渐变应该像这样:

I just wanted to create a two color gradient using bootstrap mixin functions. So my gradient should be like this:

使用自举梯度混合时，我发现没有任何功能可以满足我的要求.因此，我尝试制作自己的渐变mixin并将其添加到bootstrap/less/mixins/grandients.less中.但是我的职能没有完成..

when using bootstrap gradient mixin I found there is no any function to match with my requirement. So I tried making my own gradient mixin and added it to bootstrap/less/mixins/grandients.less. But my function didn't do my job..

这是我添加到渐变中的渐变混合.

This is the gradient mixin I added to 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文件中时，它对我有用.但是我正在寻找创建梯度混合的解决方案.

When I directly add pure CSS to my LESS file it working for me. But I am looking for a solution of creating a gradient mixin.

这是我渐变的纯CSS:

This is the pure CSS for my gradient:

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

希望有人可以帮助我. 谢谢你.

Hope somebody may help me out. Thank you.

推荐答案

Bootstrap的渐变已命名(请参阅: http://lesscss.org/features/#features-overview-feature-namespaces-and-accessors )，可以在less/mixins/gradients.less文件中找到.

Bootstrap's gradients are namespaced (see: http://lesscss.org/features/#features-overview-feature-namespaces-and-accessors) and can be found in the less/mixins/gradients.less file.

命名空间的mixin应该如下调用:

A namespaced mixin should be called as follows:

#namespace > mixin();

>在此调用中是可选的.

The > is optional in this call.

Bootstrap在#gradient命名空间中为您提供了一个.vertical-three-colors() mixin，它与您的纯CSS最匹配.

Bootstrap provides you a .vertical-three-colors() mixin in the #gradient namespace which best matches your pure CSS.

您应按以下方式调用此混合(例如，在bootstrap.less文件的末尾):

You should calls this mixin as follows (for instance at the end of your bootstrap.less file):

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

请注意，纯CSS支持的浏览器比Bootstrap的mixin还多.输出取决于您编译引导程序的方式.默认的构建过程将生成以上输出.

Notice that your pure CSS has support for more browsers than Bootstrap's mixin. The out depends on the way you compile bootstrap. The default build process generate the above output.

使用lessc --autoprefix="last 20 versions" grsdient.less编译以下Less代码时:

When you compile the following Less code with 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的开发人员版本，无需在生产代码中使用它.

The -ms-linear-gradient prefix only targets the developers version of IE10 and there is no need to use that in your production code.

当然，您也可以编写自己的mixin，其输出与纯CSS完全相同:

Of course you can also write your own mixins which outputs exactly the same as your pure 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

当使用#gradient > .vertical-custom();

这篇关于在引导程序中创建四个颜色渐变混合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！