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

Comprendre l'interpolation des variables Sass dans la fonction CSS calc()

Votre code utilise la fonction calc() dans Sass, qui permet des calculs dynamiques pour Valeurs CSS. Cependant, vous rencontrez un problème lorsque vous tentez d'utiliser une variable Sass dans la fonction calc(). Cet article examinera la solution à ce problème.

Interpolation des variables Sass

Pour garantir que la fonction calc() interprète correctement les variables Sass, vous devez les interpoler dans la fonction. L'interpolation signifie insérer la valeur de la variable dans le code. Dans Sass, cela peut être réalisé en plaçant le nom de la variable entre #{}.

Code révisé

Voici le code révisé qui interpole la variable $body_padding dans le calcul () fonction :

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

En interpolant la variable, Sass évalue sa valeur, le remplace dans la fonction calc() et génère la sortie CSS correcte.

Approche alternative : utiliser border-box

Une approche alternative pour gérer cette situation consiste à définissez la propriété box-sizing de l'élément sur border-box. Cela garantit que le calcul de la hauteur inclut le remplissage dans sa valeur de 100 %.

Code révisé utilisant border-box

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

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!