css - CSS グラデーション - Mixin の削減

Question

CSS コードに明るくしたり暗くしたりして、Less mixin グラデーションの色を変更できるかどうか疑問に思っていました。

これが 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);
}

Lessファイルでは、次のようなことをしたいと思います:

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

これが可能かどうか、またはこれを行う別の方法があるかどうかはわかりません。

Answer 1

私はこれを次のようにします：

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

もちろん、次のこともできます。

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

そして、それを呼び出すだけです：

.css-gradient(darken,10%);

また：

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

また：

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