Sass-Variable in CSS Calc()-Funktion: Ungelöster Variablenfehler
Bei der Verwendung der calc()-Funktion von Sass kann es vorkommen, dass Sass Variablen werden in den Argumenten der Funktion nicht erkannt. Stellen Sie sich das folgende Szenario vor:
$body_padding: 50px body padding-top: $body_padding height: calc(100% - $body_padding)
Während die Verwendung des Literalwerts 50px die erwarteten Ergebnisse generiert, führt der Wechsel zur Variablen $body_padding zu einer Ausgabe, die die Variable innerhalb der Funktion calc() verwaltet.
Um dieses Problem zu beheben und eine korrekte Variableninterpretation sicherzustellen, besteht eine empfohlene Lösung darin, die Variable innerhalb der Funktion calc() wie folgt zu interpolieren Syntax:
body height: calc(100% - #{$body_padding})
Eine weitere praktikable Option, speziell für diesen Anwendungsfall, ist die Verwendung der Border-Box-Eigenschaft:
body box-sizing: border-box height: 100% padding-top: $body_padding
Die Verwendung von Border-Box stellt sicher, dass die Height-Eigenschaft die umfasst Auffüllen, wodurch die Notwendigkeit benutzerdefinierter Berechnungen innerhalb der calc()-Funktion effektiv entfällt.
Das obige ist der detaillierte Inhalt vonWarum löst Sass Variablen innerhalb der Funktion „calc()' nicht auf?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!