Comment puis-je empêcher LESS CSS de modifier les expressions `calc()` ?

Surmonter le problème de compilation LESS CSS Calc()

En tentant d'utiliser calc() dans le code LESS, les développeurs peuvent rencontrer un problème où le compilateur LESS modifie le calcul, entraînant une sortie incorrecte. Par exemple, le code suivant :

width: calc(100% - 200px);

s'affiche comme :

width: calc(-100%);

Pour résoudre ce problème, on peut utiliser des chaînes d'échappement dans LESS. Cette approche permet à l'expression calc() d'être traitée comme une chaîne, empêchant le compilateur de la manipuler.

width: ~"calc(100% - 200px)";

Cela garantit que le résultat final reste cohérent avec le code d'origine. De plus, il est possible de combiner Less math avec des chaînes d'échappement, comme démontré ci-dessous :

width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em");

Cela compilera en :

width: calc(100% - 15rem + 15px + 2em);

Less concatène les valeurs avec un espace par défaut, ce qui permet l'intégration transparente des chaînes échappées et des résultats de calcul. La mise en œuvre de cette technique désactive efficacement l'écrasement par LESS des expressions 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!