css - 如何在Less mixin中更改多个数字的单位？

我正在尝试创建一个mixin，以便可以将单位从px更改为rem。现在，我有以下代码：

@emSize : 16px;
@pxr    : 1 / unit(@emSize, rem);

.padding(@padding) {padding: @padding * @pxr;}

.test {.padding(10px);}

如果我在mixin中只有一个数字，这可以正常工作，但是如果我有多个数字，则无法工作。例如，这不起作用：

.test {.padding(10px 25px);}

我无法弄清楚的是如何使它在Less中工作。

最佳答案

选项1

您可以使用逗号分隔的值以最少的代码实现相同的目的：

@emSize : 16px;
@pxr    : 1 / unit(@emSize, rem);

.padding(@verticalpad, @horizontalpad) {
      padding: (@verticalpad * @pxr) (@horizontalpad * @pxr);
}

.test {
      .padding(10px, 25px);
}

See it working

选项2

您是否尝试过将两个功能分开？

@emSize : 16px;
@pxr    : 1 / unit(@emSize, rem);

.paddingver(@paddingver) {
       padding-top: @paddingver * @pxr;
       padding-bottom: @paddingver * @pxr;
}
.paddinghor(@paddinghor) {
       padding-left: @paddinghor * @pxr;
       padding-right: @paddinghor * @pxr;
}

.test {
       .paddingver(10px);
       .paddinghor(25px);
}

See it working

关于css - 如何在Less mixin中更改多个数字的单位？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35725979/