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

Question

我有一个像这样的mixin:

.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