Merge calc() mit weniger CSS

Question

Ich habe eine Variable weniger mit einem CSS calc() Ausdruck und möchte diese Variable in einem anderen calc() Ausdruck verwenden. Die CSS-Spezifikation erlaubt verschachtelte calc() Ausdrücke, aber nicht alle Browser unterstützen dies (IE/Edge).

Da verschachtelte calc() Ausdrücke im Wesentlichen keine echte Verwendung haben (sie sind ein Nebeneffekt der Verwendung von Präprozessorvariablen), frage ich mich, ob es möglich ist, sie zu einem einzigen Ausdruck mit LESS zusammenzuführen.

von Beispiel möchte ich dies:

@var1: ~"calc(5rem/10px)"; 
@var2: ~"calc(50px + "@var1~")"; 

in kompilieren:

calc(50px + (5rem/10px)) 

Statt dessen:

calc(50px + calc(5rem/10px)) 

Answer 1

ich eine Art von "schmutzigen Trick" fand die LESS replace() Funktion:

@var2: ~"calc(50px + "replace(@var1, "calc", "")~")"; 

Beachten Sie, dass, wenn das Kind calc() Ausdruck andere Variablen enthält, funktioniert es nur, wenn sie interpoliert werden:

@var1: 5rem; 
@var2: ~"calc(@{var1}/10px)"; 
@var3: ~"calc(50px + "replace(@var2, "calc", "")~")"; 

Answer 2

Könnten Sie möglicherweise spaltete die erste var in zwei? Zum Beispiel:

@var1a: 5rem/10px; 
@var1: calc(@var1a); 

Wo:

• @var2a: ~"calc(50px + "@var1~")";calc(50px + calc(0.5rem))
• @var2b: ~"calc(50px + @{var1a})"; produziert produziert calc(50px + 0.5rem)