Ich versuche, ein Mixin zu erstellen, um Pixel in relative Ems umzuwandeln. Ich möchte, dass es flexibel genug ist, um die Verwendung einer Eigenschaft mit einer beliebigen Anzahl von Pixelwerten zu ermöglichen.

Haben Sie eine Idee, wie Sie einer einzelnen Eigenschaft mehrere Werte hinzufügen können, ohne dass der Rekursionsfehler auftritt, den ich in der for-Schleife erstelle?

Gewünschtes Verwendungsbeispiel 1:

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

Gewünschte Ausgabe:

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

Gewünschtes Verwendungsbeispiel 2:

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

Gewünschte Ausgabe:

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

Hier ist das Mixin wie es ist.

@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 gefundenHie