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