css - 如何在 LESS CSS 中按字面意思传递 mixin 参数？

Question

这是我的混音:

.gradient (...) {
    background-image: -webkit-linear-gradient(@arguments);
    background-image: -moz-linear-gradient(@arguments);
    background-image: -ms-linear-gradient(@arguments);
    background-image: -o-linear-gradient(@arguments);
    background-image: linear-gradient(@arguments);
}

我正在尝试像这样使用它:

.gradient(top, #333333 0%, #282828 100%);

问题是 LESS 去掉了所有的逗号，所以输出看起来像这样:

background-image: linear-gradient(top #333333 0% #272727 100%);

是否有可能让 LESS 按字面意思传递参数？或者，我应该如何解决这个问题？

Answer 1

为了实现您正在寻找的内容，我认为您必须使用以下语法之一将 @arguments 作为文字字符串传递:

1. ~"top, #333333 0%, #282828 100%"

2. e("top, #333333 0%, #282828 100%")

语法 ~"value" 和 e("value") 几乎是等价的。

然后你应该这样调用你的.gradient(@arguments) mixin:

.gradient( e("top, #333333 0%, #282828 100%") );