CSS 渐变 - 更少的 Mixins答案

【问题标题】：CSS Gradients - Less MixinsCSS 渐变 - 更少的 Mixins
【发布时间】：2012-06-06 18:44:25
【问题描述】：

我只是想知道是否可以通过对 CSS 代码应用变亮或变暗来改变 Less 混合渐变的颜色？

这是 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%);
}

不知道这是否可行，或者是否有其他方法可以做到这一点。

【问题讨论】：

我不太确定你想用变暗功能实现什么，也许你可以提供一个更少的示例和相应的 css 代码。这会让事情更清楚。

标签： css less

【解决方案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);

【讨论】：

【解决方案2】：

少混入：

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

使用：.gradient(90deg, #FFAA64, #FFCD73);

【讨论】：