a LESS mixin for versatile gradients (with IE support)

examples-and-output.css

/* Basic two stop gradient */
.example-gradient {
	.linear-gradient(150deg,  #eee, #aaa);
}
/* Outputs */
.example-gradient {
	background: -webkit-linear-gradient(150deg, #EEE 0%, #AAA 100%);
	background: -moz-linear-gradient(150deg, #EEE 0%, #AAA 100%);
	background: -ms-linear-gradient(150deg, #EEE 0%, #AAA 100%);
	background: -o-linear-gradient(150deg, #EEE 0%, #AAA 100%);
	background: linear-gradient(150deg, #EEE 0%, #AAA 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffaaaaaa', endColorstr='#ffeeeeee', GradientType=1);
	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffaaaaaa',endColorstr='#ffeeeeee',GradientType=1);
}

/* Multi stop gradient */
.example-multistop-gradient {
	.linear-gradient-multi(~'top, #eee 0%, #aaa 50%, #eee 100%');
	.linear-gradient-ie(top, #eee, #aaa);
}
/* Outputs */
.example-multistop-gradient {
	background-image: -webkit-linear-gradient(top, #EEE 0%, #AAA 50%, #EEE 100%);
	background-image: -moz-linear-gradient(top, #EEE 0%, #AAA 50%, #EEE 100%);
	background-image: -ms-linear-gradient(top, #EEE 0%, #AAA 50%, #EEE 100%);
	background-image: -o-linear-gradient(top, #EEE 0%, #AAA 50%, #EEE 100%);
	background-image: linear-gradient(top, #EEE 0%, #AAA 50%, #EEE 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffaaaaaa', GradientType=0);
	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee',endColorstr='#ffaaaaaa',GradientType=0);
}

/* Transparency */
.example-transparent-gradient {
	.linear-gradient( bottom, rgba(248, 164, 64, 0.7), rgba(231, 184, 5, 0.25) );
}
/* Outputs */
.example-transparent-gradient {
	background: -webkit-linear-gradient(bottom, rgba(248, 164, 64, 0.7) 0%, rgba(231, 184, 5, 0.25) 100%);
	background: -moz-linear-gradient(bottom, rgba(248, 164, 64, 0.7) 0%, rgba(231, 184, 5, 0.25) 100%);
	background: -ms-linear-gradient(bottom, rgba(248, 164, 64, 0.7) 0%, rgba(231, 184, 5, 0.25) 100%);
	background: -o-linear-gradient(bottom, rgba(248, 164, 64, 0.7) 0%, rgba(231, 184, 5, 0.25) 100%);
	background: linear-gradient(bottom, rgba(248, 164, 64, 0.7) 0%, rgba(231, 184, 5, 0.25) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#40e7b805', endColorstr='#b3f8a440', GradientType=0);
	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#40e7b805',endColorstr='#b3f8a440',GradientType=0);
}

linear-gradient.less

//============================================================
//
// linear-gradient
//
// @param dir                 :  top, left, 90deg
// @param start-color         :  #000, rgba(255,255,255,0.5)
// @param end-color           :  #000, rgba(255,255,255,0.5)
//
// NOTE: The direction for the IE gradient is automagically 
// worked out for you based either on the direction or the 
// angle that you pass in. Obviously it will only be a 
// horizontal or vertical gradient, but it's still awesome.
//
// ALSO: Support for rgba is covered in IE too. Values are 
// converted to aRGB.
//
// @example .linear-gradient(50deg,  #eee, #aaa); (IE auto included)
//
// OR
//
// @example .linear-gradient-multi(~'top, #eee 0%, #aaa 50%, #eee 100%');
//          .linear-gradient-ie(top, #eee, #aaa);
//
//
// @see http://dev.w3.org/csswg/css3-images/#linear-gradients
//
//============================================================

.linear-gradient( @dir: top, @start-color: #eee, @end-color: #aaa ) {
	background: -webkit-linear-gradient(@dir, @start-color 0%, @end-color 100%);
	background: -moz-linear-gradient(@dir, @start-color 0%, @end-color 100%);
	background: -ms-linear-gradient(@dir, @start-color 0%, @end-color 100%);
	background: -o-linear-gradient(@dir, @start-color 0%, @end-color 100%);
	background: linear-gradient(@dir, @start-color 0%, @end-color 100%);
	.linear-gradient-ie( @dir, @start-color, @end-color);
}

.linear-gradient-multi( ... ) {
	background-image: -webkit-linear-gradient(@arguments);
	background-image: -moz-linear-gradient(@arguments);
	background-image: -ms-linear-gradient(@arguments);
	background-image: -o-linear-gradient(@arguments);
	background-image: linear-gradient(@arguments);
}

.linear-gradient-ie( @dir, @start-color, @end-color) when (@dir = top), 
	not ( isstring(@dir) ) and ( @dir >= 225 ) and ( @dir < 315 ), 
	not ( isstring(@dir) ) and ( @dir >= -135 ) and ( @dir < -45 ) {
		.linear-gradient-ie-filter(@start-color, @end-color, 0);
}
.linear-gradient-ie( @dir, @start-color, @end-color) when (@dir = right), 
	not ( isstring(@dir) ) and ( @dir >= 135 ) and ( @dir < 225 ), 
	not ( isstring(@dir) ) and ( @dir >= -225 ) and ( @dir < -135 ) {
		.linear-gradient-ie-filter(@end-color, @start-color, 1);
}
.linear-gradient-ie( @dir, @start-color, @end-color) when (@dir = bottom), 
	not ( isstring(@dir) ) and ( @dir >= 45 ) and ( @dir < 135 ), 
	not ( isstring(@dir) ) and ( @dir >= -315 ) and ( @dir < -225 ) {
		.linear-gradient-ie-filter(@end-color, @start-color, 0);
}
.linear-gradient-ie( @dir, @start-color, @end-color) when (@dir = left), 
	not ( isstring(@dir) ) and ( @dir >= 315 ) and ( @dir < 360 ), 
	not ( isstring(@dir) ) and ( @dir >= -45 ) and ( @dir < 45 ), 
	not ( isstring(@dir) ) and ( @dir < -315 ) and ( @dir >= -360 ) {
		.linear-gradient-ie-filter(@start-color, @end-color, 1);
}

.linear-gradient-ie-filter(@start: #eee, @end: #aaa, @type: 1) {
	@c-start: argb(@start);
	@c-end:   argb(@end);
	filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{c-start}', endColorstr='@{c-end}', GradientType=@{type})";
	-ms-filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{c-start}',endColorstr='@{c-end}',GradientType=@{type})";
}

In my environment, for linear-gradient-multi, passing @arguments to the secondary functions produces a list of arguments with no commas. I've had to adapt it to the following:

.linear-gradient-multi( ... ) {
  @joined: ~`"@{arguments}".slice(1,-1)`;
  background-image: -webkit-linear-gradient(@joined);
  ...
}

Thanks.

Hello,
I really need to ask if I can use this LESS Mixin for commercial projects.
So... Can I ?

Alfa9Dev, come on ^^ this is a mixin, not a combo!

Slight issue with the following code with the output.

background: linear-gradient(@dir, @start-color 0%, @end-color 100%);

Which outputs the following.

background: linear-gradient(top, #fff 0%, #000 100%);

It needs to have 'to' at the start of the direction to work.

background: linear-gradient(to top, #fff 0%, #000 100%);

The issue relates to the fact that an angle as well as a direction can be input. So would it be better to input.

@param dir : to top, to left, 90deg

Then amend the function as below?

@dir-delete-to: replace(~'@{dir}', 'to ', '');
background: -webkit-linear-gradient(@dir-delete-to, @start-color 0%, @end-color 100%);
background: -moz-linear-gradient(@dir-delete-to, @start-color 0%, @end-color 100%);
background: -ms-linear-gradient(@dir-delete-to, @start-color 0%, @end-color 100%);
background: -o-linear-gradient(@dir-delete-to, @start-color 0%, @end-color 100%);
background: linear-gradient(@dir, @start-color 0%, @end-color 100%);

Plus.

.linear-gradient-ie(@dir-delete-to, @start-color, @end-color );