CSS Gradients - Less Mixins

use*_*879 6 css3 less

我只是想知道是否可以通过对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);
}
Run Code Online (Sandbox Code Playgroud)

在Less文件中我想做这样的事情:

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

不知道这是否可行,或者我是否应该采取其他方式.

Mik*_*nna 15

我这样做是这样的:

.css-gradient(darken(#20416A,10%),darken(#3D69A5,10%))
Run Code Online (Sandbox Code Playgroud)

当然你也可以这样做:

.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));
}
Run Code Online (Sandbox Code Playgroud)

然后打电话给它:

.css-gradient(darken,10%);
Run Code Online (Sandbox Code Playgroud)

要么:

.css-gradient(#20416A, #3D69A5);
Run Code Online (Sandbox Code Playgroud)

要么:

.css-gradient(darken,5%,#00ff00,#ff0000);
Run Code Online (Sandbox Code Playgroud)