Linear gradient mixin for LESS CSS

linear-gradient.less

// linear-gradient
//============================================================
// @see http://dev.w3.org/csswg/css3-images/#linear-gradients
//
// @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)
//
// @example .linear-gradient-multi(~'top, #eee 0%, #aaa 50%, #eee 100%');
//          .linear-gradient-ie(top, #eee, #aaa);

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

Hello @kellec, congrats for your code, it's awesome and helpfuly. Thanks!
So, i'd like suggest an update for new syntax changes on direction parameters in linear gradients. Eg:

• "left" now is "to right"
• "top" >>> "to bottom"
• use "to left" instead "right"

And so on. In your code, just:

(@dir: top ... ) and (@dir = top)

Hope this helps. Bye! ;)

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient