Create four color gradient mixin in bootstrap

Question

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

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
  }

I call it like this

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

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.

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.

Answer 1

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.

A namespaced mixin should be called as follows:

#namespace > mixin();

The > is optional in this call.

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

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

The preceding outputs:

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

Demo: http://codepen.io/bassjobsen/pen/ogjeJE

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.

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

that will output:

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

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

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

now the following code:

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

outputs:

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

Demo: http://codepen.io/bassjobsen/pen/LEpzEm

Make sure that the .vertical-custom mixin had been added inside the #gradient namespace in the gradients.less file when called with #gradient > .vertical-custom();