Wie kann ich Sass-Variablen in der CSS-Funktion „calc()' verwenden?

Verstehen der Sass-Variableninterpolation in der CSS-Funktion calc()

Ihr Code verwendet die Funktion calc() in Sass, die dynamische Berechnungen für ermöglicht CSS-Werte. Beim Versuch, eine Sass-Variable innerhalb der Funktion calc() zu verwenden, tritt jedoch ein Problem auf. Dieser Artikel befasst sich mit der Lösung dieses Problems.

Sass-Variablen interpolieren

Um sicherzustellen, dass die calc()-Funktion Sass-Variablen korrekt interpretiert, müssen Sie sie darin interpolieren die Funktion. Unter Interpolation versteht man das Einfügen des Variablenwerts in den Code. In Sass kann dies erreicht werden, indem der Name der Variablen in #{} eingeschlossen wird.

Überarbeiteter Code

Hier ist der überarbeitete Code, der die Variable $body_padding innerhalb der Berechnung interpoliert ()-Funktion:

body {
  height: calc(100% - #{$body_padding}); // Interpolation
}

Durch Interpolation der Variablen wertet Sass ihren Wert aus, ersetzt es innerhalb der calc()-Funktion und generiert die korrekte CSS-Ausgabe.

Alternativer Ansatz: Verwendung von border-box

Ein alternativer Ansatz zur Bewältigung dieser Situation ist Setzen Sie die Box-Sizing-Eigenschaft des Elements auf border-box. Dadurch wird sichergestellt, dass die Höhenberechnung die Polsterung innerhalb ihres 100 %-Werts berücksichtigt.

Überarbeiteter Code unter Verwendung von border-box

body {
  box-sizing: border-box;
  height: 100%; // 100% includes the padding
  padding-top: $body_padding;
}

Das obige ist der detaillierte Inhalt vonWie kann ich Sass-Variablen in der CSS-Funktion „calc()' verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!