Comment puis-je éviter moins d'erreurs de compilation lors de l'utilisation des propriétés CSS `calc()` ?

Le compilateur Less interprète mal les propriétés CSS calc()

Certains compilateurs Less, notamment OrangeBits et dotless, convertissent de manière incorrecte les expressions CSS calc(). Par exemple, l'expression "width: calc(100% - 250px - 1.5em)" est transformée par erreur en "width: calc(-151.5%)".

Solution dans Less 3.00 et versions ultérieures

Dans Less versions 3.00 et supérieures, le compilateur n'évalue plus automatiquement expressions dans calc(). Ce changement élimine le besoin d'une intervention manuelle lors de l'utilisation de calc().

Solution dans les versions antérieures de Less

Pour les versions Less inférieures à 3.00, les utilisateurs peuvent empêcher l'évaluation automatique en joignant l'expression calc() dans l'opérateur ~. Par exemple :

body { width: calc(~"100% - 250px - 1.5em"); }

De plus, la version 1.4.0 de Less a introduit une option strictMaths, qui nécessite que tous les calculs de Less soient mis entre parenthèses. Cette option garantit que les expressions calc() sont gérées correctement par défaut.

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!