Wie mit SCSS-Variablen von Funktion

Question

berechnen Ich habe eine Funktion, die px in rem konvertiert. Zum Beispiel:

height: rem-calc(14px); // makes height: 1rem; 

Jetzt möchte ich damit aus Variablen berechnen. Zum Beispiel:

$switch-track-width: rem-calc(50px); 
$switch-thumb-size: $switch-track-width/2; // making it 25px or 1.7857rem in this case 

, die nicht so funktioniert habe ich versucht, etwas anderes:

$switch-thumb-size: ($switch-track-width/2) + 0rem; 
$switch-thumb-size: (#{$switch-track-width}/2) + 0rem; 

Beiden $switch-thumb-size Beispiele entweder nicht arbeiten. Jetzt ist das Teilen, aber ich bin auch nicht in der Lage, times (*), plus (+) und arbeiten zu bekommen.

Ich habe auch ein Problem bei der Berechnung mit 2 Variablen. Zum Beispiel:

$switch-track-height: rem-calc(14px); 
$switch-track-width: rem-calc(50px); 
$switch-thumb-right: $switch-track-height - $switch-track-width; 

I prever die Funktion innerhalb der Variablen zu halten, anstatt in der Eigenschaft wie: height: rem-calc($switch-track-height);.

Wenn jemand mir sagen könnte, wie mit SCSS-Variablen auf beiden Beispielen zu berechnen, wäre das sehr hilfreich.

Vielen Dank im Voraus

Answer 1

ich es geschafft, etwas zu finden, was einige Arbeits ist. Zum Beispiel:

$switch-thumb-size: rem-calc(10px); 
$switch-track-height: rem-calc(20px); 
$something: calc((#{$switch-thumb-size} - #{$switch-track-height})/2); 

Daraus ergibt sich:

calc((0.71428rem - 1.4285rem)/2) 

Aber es gibt Probleme mit ihm. Erstens, wenn Sie wissen, dass das, was Sie berechnet haben, immer minus sein sollte und Sie deshalb ein Zeichen vor der Variablen hinzufügen, wird es nicht funktionieren. Beispiel:

height: - $something; // Doesn't work 

Das zweite Problem, das ich mit dieser Methode habe, ist, dass es eine Menge redundanter Zeichen erstellt.

Weil es bringt tatsächlich: height: calc((0.71428rem - 1.4285rem)/2) in Ihrem CSS statt: height: -0.35684rem