Pourquoi ma fonction CSS calc() ne fonctionne-t-elle pas ?

Dépannage de la fonction CSS calc()

La fonction calc() en CSS est un outil puissant pour effectuer des calculs sur des valeurs. Cependant, il arrive parfois qu’il fonctionne mal à cause d’oublis ou de malentendus. Un problème courant est celui d'un espacement incorrect.

Le besoin d'espacement

Les opérateurs dans les expressions calc() doivent être séparés par des espaces. Négliger cette règle peut conduire à une analyse incorrecte, comme le démontrent les exemples fournis :

calc(100vw/4-(10-4))  // Incorrect (no space after '-')
calc(100vw/4-(10px-4))  // Incorrect (no space after 'px')
calc(100vw/4-(10px-4px)) // Incorrect (no space before and after '-', no space between 'px')

Pour résoudre ce problème, introduisez simplement des espaces comme suit :

calc(100vw/4 - (10 - 4))
calc(100vw/4 - (10px - 4)) // Optionally, space before 'px' for consistency

Expressions imbriquées

Les fonctions calc() peuvent être imbriquées les unes dans les autres, agissant comme de simples parenthèses. Cependant, il est important de suivre les mêmes règles d'espacement pour les expressions imbriquées. Par exemple :

calc(100vw/4 - calc(10px - 4px)) // Outer and inner expressions spaced correctly

Travailler avec des variables

Dans les boucles SASS, les variables peuvent être remplacées dans les expressions calc(). Pour garantir des calculs corrects, assurez-vous que la variable est correctement placée entre parenthèses et que les opérateurs ont un espacement approprié. Par exemple, pour gérer l'expression calc(100vw/x-(10px-x)) où x est remplacé dans une boucle SASS :

calc(100vw / ($x) - (10px - $x)) // Spaces around operators, parentheses around variable

En suivant ces règles, vous pouvez efficacement dépanner et manipuler le calcul () dans votre code CSS. N'oubliez pas d'ajouter des espaces entre les opérateurs, d'imbriquer soigneusement les expressions et d'utiliser des parenthèses pour les variables dans 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!