Horizontal and vertical gradient mixins variable order forces percentages

[ahecht]

See mixins.less lines 238 and 252 in RC1.

The order of the variables and defaults in the horizontal and vertical gradient mixins cause the CSS to be invalid if percentages aren't included. Changing the variable order to @start-color, @end-color, @start-percent, @end-percent enables passing only 2 colors and still getting a valid gradient using default percentages.

Details:
Horizontal gradient mixin is currently:
.horizontal(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%)

So using #gradient > .horizontal(#fff, #000); breaks the CSS when the second value is used as @start-percent instead of @end-color.

Changing the variable order fixes the problem:
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%)

Gradient percentages can still be passed optionally after the start and end color.

Same for .vertical.

[mdo]

Yeah ran into this myself as well. Will likely change it to what you've suggested.

[mdo]

Oh, almost forgot—you can avoid this actually by specifying which variable you want to hit, like so:

#gradient > .horizontal(@start-color: #fff; @end-color: #000);

[ahecht]

Oh right! Thanks, that's definitely useful.