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

Question

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

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

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

.test {.padding(10px);}

如果我在 mixin 中只有一个数字，这可以正常工作，但如果我有多个数字，它就不起作用。例如，这不起作用:

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

我想不通的是如何让它在 Less 中工作。

Answer 1

选项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