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

Solution de contournement pour l'écrasement de calc() de LESS-CSS

LESS-CSS a tendance à modifier la syntaxe des fonctions calc(), conduisant à une sortie inattendue. Pour résoudre ce problème, une méthode alternative est nécessaire pour empêcher LESS de modifier la syntaxe.

Solution : Chaînes échappées

Une solution efficace consiste à utiliser des chaînes échappées, également connues comme valeurs échappées. En utilisant un caractère tilde (~) avant les guillemets, LESS interprète le contenu comme une chaîne littérale, l'empêchant d'effectuer des calculs ou des modifications.

Par exemple, si vous souhaitez afficher le calc(100% - 200px) sans modifications, vous utiliseriez la syntaxe suivante :

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

Chaînes échappées avec Less Math

Dans les cas où vous devez combiner Less math avec des chaînes d'échappement, telles que :

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

LESS concatènera ces valeurs avec un espace par défaut, ce qui donnera le résultat souhaité sortie :

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

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!