Comment puis-je utiliser avec succès les variables Sass dans la fonction CSS `calc()` ?

Variables Sass dans la fonction CSS calc() : surmonter les obstacles à l'évaluation

Lorsque vous travaillez avec des feuilles de style Sass, l'utilisation de la fonction calc() avec des variables Sass peut rencontrer des défis. Cet écart survient lorsque la fonction calc() ne parvient pas à reconnaître la substitution de variable, ce qui entraîne l'affichage d'une variable non résolue, comme le montre l'exemple fourni.

Pour résoudre ce problème, deux méthodes peuvent être utilisées :

Interpolation :

Pour les cas où la variable fonctionne uniquement dans la fonction calc(), l'approche d'interpolation peut être utilisée. En utilisant cette interpolation "#{}" autour de la variable, le compilateur Sass assure son évaluation et sa substitution avant que la fonction calc() n'intervienne sur elle.

La solution Border-Box :

Une Une alternative à l'interpolation, particulièrement adaptée aux scénarios dans lesquels la variable influence plusieurs propriétés, est la solution border-box. Cette technique implique de définir la propriété box-sizing sur border-box, garantissant que le remplissage et la bordure sont contenus dans la largeur et la hauteur de l'élément. En réglant ensuite la hauteur à 100 % et en ajoutant le remplissage souhaité, le résultat escompté est obtenu sans recourir à 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!