CSS Gradients - Less Mixins

Question

I'm just wondering if it is possible to change the color of the Less mixin gradient by applying something like lighten or darken to the CSS?

Here is Less Mixin:

.css-gradient(@from: #20416A, @to: #3D69A5) { background-color: @to; background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to)); background-image: -webkit-linear-gradient(top, @from, @to); background-image: -moz-linear-gradient(top, @from, @to); background-image: -o-linear-gradient(top, @from, @to); background-image: -ms-linear-gradient(top, @from, @to); background-image: linear-gradient(top, @from, @to); } 

And in a smaller file I would like to do something like this:

 #div { width:100px; height:100px; .css-gradient (darken, 10%); } 

I don’t know if this is possible, or if there is another way, I have to do it.

Answer 1

I would do it like this:

 .css-gradient(darken(#20416A,10%),darken(#3D69A5,10%)) 

Of course, you can also:

 .css-gradient(@from: #20416A, @to: #3D69A5) { background-color: @to; background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to)); background-image: -webkit-linear-gradient(top, @from, @to); background-image: -moz-linear-gradient(top, @from, @to); background-image: -o-linear-gradient(top, @from, @to); background-image: -ms-linear-gradient(top, @from, @to); background-image: linear-gradient(top, @from, @to); } .css-gradient(darken,@amount: 10%, @from: #20416A, @to: #3D69A5){ .css-gradient(darken(@from,@amount),darken(@to,@amount)); } 

And then just call it:

 .css-gradient(darken,10%); 

or

 .css-gradient(#20416A, #3D69A5); 

or

 .css-gradient(darken,5%,#00ff00,#ff0000);