Maison >interface Web >tutoriel CSS >Comment puis-je utiliser les variables Sass dans la fonction `calc()` de CSS ?

Comment puis-je utiliser les variables Sass dans la fonction `calc()` de CSS ?

Barbara Streisand
Barbara Streisandoriginal
2024-12-02 20:27:11875parcourir

How Can I Use Sass Variables Inside CSS's `calc()` Function?

Variables Sass dans la fonction CSS calc()

Lors de l'incorporation de variables Sass dans la fonction calc(), des défis peuvent survenir. Par exemple, l'utilisation d'une variable comme $body_padding dans calc() ne déclenche pas automatiquement la substitution souhaitée. Au lieu de cela, le résultat ressemble à ce qui suit :

body {
    padding-top: 50px;
    height: calc(100% - $body_padding);
}

Pour rectifier cette situation et garantir que Sass reconnaît la nécessité de remplacer les variables dans la fonction calc(), utilisez l'interpolation. Interpolez la variable en utilisant la syntaxe #{$body_padding} :

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

Alternativement, l'utilisation de la propriété border-box peut également résoudre efficacement ce problème :

body
    box-sizing: border-box
    height: 100%
    padding-top: $body_padding

Avec ces méthodes, Sass va désormais interpréter et remplacer correctement les variables dans la fonction calc(), réalisant ainsi les calculs souhaités.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn