Pourquoi Sass ne résout-il pas les variables à l'intérieur de la fonction `calc()` ?

Variable Sass dans la fonction CSS Calc() : erreur de variable non résolue

Lors de l'utilisation de la fonction calc() de Sass, vous pouvez rencontrer des cas où Sass les variables ne sont pas reconnues dans les arguments de la fonction. Considérez le scénario suivant :

$body_padding: 50px

body
    padding-top: $body_padding
    height: calc(100% - $body_padding)

Bien que l'utilisation de la valeur littérale 50px génère les résultats attendus, le passage à la variable $body_padding entraîne une sortie qui maintient la variable dans la fonction calc().

Pour résoudre ce problème et garantir une interprétation correcte des variables, une solution recommandée consiste à interpoler la variable dans la fonction calc() en utilisant ce qui suit syntaxe :

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

Une autre option viable, spécifiquement pour ce cas d'utilisation, consiste à utiliser la propriété border-box :

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

L'emploi de border-box garantit que la propriété height englobe le remplissage, éliminant efficacement le besoin de calculs personnalisés dans la fonction calc().

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!