Heim > Web-Frontend > CSS-Tutorial > Warum löst Sass Variablen innerhalb der Funktion „calc()' nicht auf?

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

DDD
Freigeben: 2024-12-01 14:50:14
Original
831 Leute haben es durchsucht

Why Doesn't Sass Resolve Variables Inside the `calc()` Function?

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)
Nach dem Login kopieren

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})
Nach dem Login kopieren

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
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage