Comment puis-je empêcher less compilateurs d'évaluer incorrectement les propriétés CSS `calc()` ?

Propriétés Less et CSS Calc() : obstacle à la compilation agressive

Les compilateurs Less, tels que OrangeBits et dotless, peuvent tenter de compiler et d'évaluer Propriétés CSS calc(), conduisant à des résultats incorrects. Cet article explore les moyens d'éviter ce comportement et de conserver les styles CSS souhaités.

Comportement par défaut de Less

Less est utilisé pour évaluer de manière proactive les expressions dans calc(), ce qui entraîne des résultats erronés. . Par exemple, body { width: calc(100% - 250px - 1.5em); } serait incorrectement traduit en body { width: calc(-151.5%); }.

Solution pour Less

Faites ceci :

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

En utilisant l'opérateur ~, vous signalez à Less d'ignorer l'expression pendant compilation.

Solution pour Less v3.00 et Plus tard

Less n'évalue plus automatiquement les expressions dans calc() par défaut. Par conséquent, pour Less v3.00 et versions ultérieures, aucune action spécifique n'est nécessaire pour empêcher une compilation agressive.

Option Maths strictes

Dans Less 1.4.0, il existe un Option strictMaths qui nécessite que tous les calculs Less soient mis entre parenthèses. Cette option garantit que calc() fonctionnera comme prévu sans aucune modification. Par défaut, cette option est désactivée dans la version finale de Less 1.4.0.

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!