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（）mixin找到here

Answer 1

请参阅Merge功能。唯一的技巧是merge语句会将值连接到相同的属性规则中，因此您必须通过某些hack来隔离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

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

1 个答案: