Warum löst Sass Variablen innerhalb der Funktion „calc()' nicht auf?

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!