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

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!