Css 如何减少具有可变停止次数的渐变的混合？

我发现的所有渐变的较少混合都只有固定数量的停止点。less和css在使用逗号时的冲突使得变量stop无法以相同的方式执行

我用于双向渐变的当前混合

.gradient (@origin: left, @step-1: @white,  @step-2: @black, @fallback: @step-1){
    background-color: @fallback;
    background: -webkit-linear-gradient(@origin, @step-1, @step-2) @fallback no-repeat;
    background:    -moz-linear-gradient(@origin, @step-1, @step-2) @fallback no-repeat;
    background:    -ms-linear-gradient(@origin, @step-1, @step-2) @fallback no-repeat;
    background:      -o-linear-gradient(@origin, @step-1, @step-2) @fallback no-repeat;
    background:         linear-gradient(@origin, @step-1, @step-2) @fallback no-repeat;
}

还有三条路

    .gradient-3-way (@origin: left,  @step-1: @white,  @step-2: @black,  @step-3: @white, @fallback: @step-1){
        background-color: @fallback;
        background: -webkit-linear-gradient(@origin, @step-1, @step-2, @step-3) @fallback no-repeat;
        background:    -moz-linear-gradient(@origin, @step-1, @step-2, @step-3) @fallback no-repeat;
        background:      -ms-linear-gradient(@origin, @step-1, @step-2, @step-3) @fallback no-repeat;
        background:      -o-linear-gradient(@origin, @step-1, @step-2, @step-3) @fallback no-repeat;
        background:         linear-gradient(@origin, @step-1, @step-2, @step-3) @fallback no-repeat;
    }

---

您必须使用单独的变量将渐变样式拉入mixin调用

 @grady: right, #fff 0, #000 20px, #000 20px, #f00 20px;
.red{.gradient-multi (@grady);}
.gradient-multi (@grad: right){
    background: -webkit-linear-gradient(@grad) no-repeat;
    background:    -moz-linear-gradient(@grad) no-repeat;
    background:    -ms-linear-gradient(@grad) no-repeat;
    background:      -o-linear-gradient(@grad) no-repeat;
    background:         linear-gradient(@grad) no-repeat;
}

不需要单独的变量 您所需要的只是确保使用分号作为参数的分隔符，即使这恰好只是您要传递的一个参数。所以这是可行的：

更少

@white:#fff；
.gradient（@origin:left，@fallback:white，@stops）{
背景色：@fallback；
背景：-webkit线性梯度（@原点，@停止）@回退-无重复；
背景：-moz线性梯度（@原点，@停止）@回退-无重复；
背景：-ms线性梯度（@原点，@停止）@回退-无重复；
背景：-o-线性梯度（@原点，@停止）@回退-无重复；
背景：线性梯度（@原点，@停止）@回退-无重复；
}
.测试{
.梯度（@stops:#fff 0，#000 20px，#000 20px，#f00 20px；）
}                                                           |
这是最后的分号
使逗号变为
成为列表分隔符
而不是参数
分离器构成整体
事物是一个变量的一部分

CSS输出

.test{
背景色：#ffffff；
背景：-webkit线性梯度（左，#ffffff 0，#000000 20px，#000000 20px，#ff0000 20px）#ffffff无重复；
背景：-moz线性梯度（左，#ffffff 0，#000000 20px，#000000 20px，#ff0000 20px）#ffffff无重复；
背景：-ms线性梯度（左，#ffffff 0，#000000 20px，#000000 20px，#ff0000 20px）#ffffff无重复；
背景：-o-线性梯度（左，#ffffff 0，#000000 20px，#000000 20px，#ff0000 20px）#ffffff无重复；
背景：线性梯度（左，#ffffff 0，#000000 20px，#000000 20px，#ff0000 20px）#ffffff无重复；
}

这太简单了。应该是

@方向：向右

而不是

@origin

？