CODEWITHSUNDEEP
cssless
user965879
user965879

Reputation: 501

CSS Gradients - Less Mixins

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.

Upvotes: 6

Views: 8887

Answers (2)

Павел Труфанов
Павел Труфанов

Reputation: 1

Less mixin:

.gradient(@dir: 0deg; @colors; @prefixes: webkit, moz, ms, o; @index: length(@prefixes)) when (@index > 0) {
    .gradient(@dir; @colors; @prefixes; (@index - 1));

    @prefix : extract(@prefixes, @index);
    @dir-old: 90 - (@dir);

    background-image: ~"-@{prefix}-linear-gradient(@{dir-old}, @{colors})";
    & when ( @index = length(@prefixes) ) {
        background-image: ~"linear-gradient(@{dir}, @{colors})";
    }
}

Using: .gradient(90deg, #FFAA64, #FFCD73);

Upvotes: 0

Mikko Tapionlinna
Mikko Tapionlinna

Reputation: 1458

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);

Upvotes: 15

Related Questions