CSS Gradients – Less Mixins

cssless

I was just wondering if it's possible to alter the color of the Less mixin gradient by applying something like lighten or darken to the CSS code?

Here is the 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 Less file I would like to do something like this:

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

Don't know if this is possible or if there is another way I should do this.

Best Answer

I'd do this like so:

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

Of course you could also do:

.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);
Related Topic