当属性具有多个值时，如何使用Less将px转换为vw？

Question

我有这样的混音：

.lib-vw (@prop, @value) {
    @result: (@value / ((1440 * 0.01) * 1px)) * 1vw;
    @{prop}: @value;
    @{prop}: @result;
}

并像这样使用它：

div {
    .lib-vw(margin-top, 18px);
}

输出是这样的：

div {
  margin-top: 18px;
  margin-top: 1.25vw;
}

此处demo

现在我希望.lib-vw()支持多个值，如下所示：

.lib-vw(margin, 18px 10px);
.lib-vw(margin, 18px 10px 20px);
.lib-vw(margin, 18px 10px 20px 30px);

如何更新（或创建新的）我的mixin以支持多个值？

提前致谢。

Answer 1

你只需要制作mixin，它需要4个值并将它们组合成一个：

.lib-vw (@prop, @value1, @value2, @value3, @value4) {
    @result1: (@value1 / ((1440 * 0.01) * 1px)) * 1vw;
    @result2: (@value2 / ((1440 * 0.01) * 1px)) * 1vw;
    @result3: (@value3 / ((1440 * 0.01) * 1px)) * 1vw;
    @result4: (@value4 / ((1440 * 0.01) * 1px)) * 1vw;
    @result: @result1 @result2 @result3 @result4;
    @value: @value1 @value2 @value3 @value4;
    @{prop}: @value;
    @{prop}: @result;
}
div {
    .lib-vw(margin, 18px, 18px, 18px, 18px);
}

Demo

Answer 2

Lists Less插件提供"vector arithmetic"功能。即如果您使用该插件，您的原始代码也适用于多个值：

.lib-vw(@prop, @value) {
    @{prop}: @value;
    @{prop}: 1vw * @value / (1440 * 0.01);
}

div {
    .lib-vw(margin-top, 18px);
}

span {
    .lib-vw(margin, 11px 22px 33px 44px);
}

CSS结果：

div {
    margin-top: 18px;
    margin-top: 1.25vw;
}
span {
    margin: 11px 22px 33px 44px;
    margin: 0.76388889vw 1.52777778vw 2.29166667vw 3.05555556vw;
}