How to apply less functions to gradient colors?

问题

I am new in less. I want to apply less functions to the gradient colors. I have tried best of my knowledge but I couldn't get the output. Can any one please suggest me the correct way to get the less function derived colors. I tried the below codes.

@input: #fff , #aaa 25%, #ccc 50%, #000 100%;
@light: 10%;
@dark: 20%;
div{
  .custom-grad(@input, @light, @dark); 
}

.for(@array)   when (default()) {.for-impl_(length(@array))}
.for-impl_(@i) when (@i > 1)    {.for-impl_((@i - 1))}
.for-impl_(@i) when (@i > 0)    {.-each(extract(@array, @i), @i)}

.custom-grad(@input, @light, @dark) {           
    .for(@input); .-each(@value, @a) {             
      @color: extract(@value, 1);   // get the color value  
      .scale() when (length(@value) = 2){ // get pix or percent value
          @percent: extract(@value, 2);     
      }
      .scale() when (length(@value) = 1){ // ignore pix or percent if not applied
          @percent:  ;     
      }
      .scale();   // call the scale mixin
      .light() when(lightness(@color) < 50) {  // lighten function
        @shade: lighten(@color, @light);
      }
      .dark() when(lightness(@color) > 50){ // darken function
        @shade: darken(@color, @dark);
      }
      .light();
      .dark();
      @result: @shade @percent;  // merge color and percent       
      .final(){        // apply the result
        background+: extract(@result,1); 
        background+: -moz-linear-gradient(top,  @result); 
        background+: -webkit-gradient(linear, left top, left bottom, color-stop(0%,extract(@result,1)), color-stop(100%,extract(@result, length(@result)))); 
        background+: -webkit-linear-gradient(top,  @result); 
        background+: -o-linear-gradient(top,  @result); 
        background+: -ms-linear-gradient(top, @result); 
        background+: linear-gradient(to bottom,  @result); 
        filter+: progid:DXImageTransform.Microsoft.gradient( startColorstr='extract(@{result},1)}', endColorstr='extract(@{result}, length(@{result}))',GradientType=0 );        
      }
      .final();  
  }
}

output:

div {
  background: #cccccc, -moz-linear-gradient(top, #cccccc ), -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, )), -webkit-linear-gradient(top, #cccccc ), -o-linear-gradient(top, #cccccc ), -ms-linear-gradient(top, #cccccc ), linear-gradient(to bottom, #cccccc ), #777777, -moz-linear-gradient(top, #777777 25%), -webkit-gradient(linear, left top, left bottom, color-stop(0%, #777777), color-stop(100%, 25%)), -webkit-linear-gradient(top, #777777 25%), -o-linear-gradient(top, #777777 25%), -ms-linear-gradient(top, #777777 25%), linear-gradient(to bottom, #777777 25%), #999999, -moz-linear-gradient(top, #999999 50%), -webkit-gradient(linear, left top, left bottom, color-stop(0%, #999999), color-stop(100%, 50%)), -webkit-linear-gradient(top, #999999 50%), -o-linear-gradient(top, #999999 50%), -ms-linear-gradient(top, #999999 50%), linear-gradient(to bottom, #999999 50%), #1a1a1a, -moz-linear-gradient(top, #1a1a1a 100%), -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1a1a1a), color-stop(100%, 100%)), -webkit-linear-gradient(top, #1a1a1a 100%), -o-linear-gradient(top, #1a1a1a 100%), -ms-linear-gradient(top, #1a1a1a 100%), linear-gradient(to bottom, #1a1a1a 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='extract(#cccccc ,1)}', endColorstr='extract(#cccccc , length(#cccccc ))', GradientType=0), progid:DXImageTransform.Microsoft.gradient(startColorstr='extract(#777777 25%,1)}', endColorstr='extract(#777777 25%, length(#777777 25%))', GradientType=0), progid:DXImageTransform.Microsoft.gradient(startColorstr='extract(#999999 50%,1)}', endColorstr='extract(#999999 50%, length(#999999 50%))', GradientType=0), progid:DXImageTransform.Microsoft.gradient(startColorstr='extract(#1a1a1a 100%,1)}', endColorstr='extract(#1a1a1a 100%, length(#1a1a1a 100%))', GradientType=0);
}

Expected Output:

background: #cccccc; 
background: -moz-linear-gradient(top,  #cccccc, #777777 25%, #999999 50%, #1a1a1a 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc)), color-stop(100%,#1a1a1a))); 
background: -webkit-linear-gradient(top,  #cccccc, #777777 25%, #999999 50%, #1a1a1a 100%); 
background: -o-linear-gradient(top,  #cccccc, #777777 25%, #999999 50%, #1a1a1a 100%); 
background: -ms-linear-gradient(top, #cccccc, #777777 25%, #999999 50%, #1a1a1a 100%); 
background: linear-gradient(to bottom,  #cccccc, #777777 25%, #999999 50%, #1a1a1a 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#cccccc, endColorstr=#1a1a1a,GradientType=0 );  

来源：https://stackoverflow.com/questions/32658697/how-to-apply-less-functions-to-gradient-colors