6

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.

1
  • I'm not quite sure what you would like to achieve with the darken function, maybe you could provide a sample less and corresponding css code. That would make things clearer.
    – topek
    Jun 6, 2012 at 20:07

2 Answers 2

15

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.