将像素转换为 rems 的 LESS mixin 递归错误

Question

我正在尝试制作一个 mixin 以属性将像素转换为相对 ems。我希望它足够灵活，允许任何属性与任意数量的像素值一起使用。

关于如何将多个值添加到单个属性而没有我在 for 循环中创建的递归错误的任何想法？

所需的用法示例 1：

.pixels-to-rems(font-size; 10);

期望的输出：

font-size: 10px;
font-size: 1rem;

所需的用法示例 2：

.pixels-to-rems(padding; 10,0,20,10);

期望的输出：

padding: 10px, 0px, 20px, 10px;
padding: 1rem, 0px, 2rem, 1rem;

这是 mixin 的原样。

@baseFontSize: 10px;
.pixels-to-rems(@property, @pxvals) {
    @pxValue: null;
    @remValue: null;

    .for(@pxvals); .-each(@pxval) {
        @pxValue: @pxValue @pxval;
        @remValue: @remValue (@pxval / @baseFontSize);
    }

    @{property}: ~"@{pxValue}px";
    @{property}: ~"@{remValue}rem";
}

.for() 发现混入 here

Answer 1

参见 Merge 功能。唯一的技巧是合并语句会将值连接到 same 属性规则中，因此您必须隔离 px 和 rem 规则通过一些黑客攻击。例如像这样：

usage {
    .pixels-to-rems(padding, 10 0 20 10);
    .pixels-to-rems(font-size, 50);
}

// impl.:

@base-font-size: 10px;

.pixels-to-rems(@p, @vs) {
    .for(@vs); .-each(@v) {
        @{p}+_:     1px  * @v;
        @{p}@{-}+_: 1rem * @v / @base-font-size;
    }
    @-: ~" ";
}

// .for-each impl. (stripped from the snipped linked in the question)

.for(@array)                 {.for-impl_(length(@array))}
.for-impl_(@i) when (@i > 1) {.for-impl_((@i - 1))}
.for-impl_(@i) when (@i > 0) {.-each(extract(@array, @i))}

Demo.

将像素转换为 rems 的 LESS mixin 递归错误

LESS mixin recursion error to convert pixels to rems

recursion

loops

mixins

less

less-mixins