SASS Calc Interpolation

Question

Ich habe eine SASS Variable:

$default-padding: 15px 

Ich möchte diese verwenden, um eine CSS-Eigenschaft width Die CALC-Funktion einzustellen.

Ich habe verschiedene Berechnungen basierend auf dem Wert der Variable $ default-padding. Zum Beispiel wäre die Breite 100% - (2 * $ Standard-Padding). Da ist links und rechts Polsterung.

Ich versuche, eine lokale Variable zu setzen (Bourbon streift Einheit Methode):

$default-padding-left-and-right: #{(strip-unit($default-padding) * 2)}px; 

Ich würde das Ergebnis dieser Variablen erwartet in diesem Anwendungsfall 30px werden, und ich will, es benutzen in der folgenden Regel:

.popup { 
    width: calc(100% - #{$default-padding-left-and-right}); 
} 

Dies funktioniert nicht, ist die resultierende CSS:

.popup { 
    width: calc(100% - strip-unit(15px)px); 
} 

A ny Ideen, was ich falsch mache?

Answer 1

Zwei Dinge lösen:

1. es wie die Bandeinheit Funktion nicht gefunden scheint (warum die Funktion Name gedruckt wird out)
2. sollten Sie die $ default-padding-left-and-right nicht interpolieren (es verwandelt den Variablenwert in einen String) - verwenden Sie stattdessen multiply.

Beispiel:

@function strip-unit($num) { @return $num/($num * 0 + 1); } 

$default-padding: 15px; 
$default-padding-left-and-right: strip-unit($default-padding) * 2px; 

.popup { 
    width: calc(100% - #{$default-padding-left-and-right}); 
} 

Ausgang:

.popup { 
    width: calc(100% - 30px); 
} 

Answer 2

Die Bourbon-Funktion ist strip-units nicht strip-unit - das Ändern sollte Ihr Problem