Comment empêcher LESS-CSS d'écraser la fonction `calc()` ?

Désactivation de l'écrasement LESS-CSS de la fonction calc()

Lors de l'utilisation de LESS-CSS, vous pouvez rencontrer un scénario dans lequel calc() La fonction est écrasée lors de la compilation, ce qui entraîne une sortie incorrecte. Pour résoudre ce problème, il existe une technique permettant de désactiver cet écrasement.

Solution : chaînes échappées

Une méthode efficace consiste à enfermer la fonction calc() dans une chaîne échappée. . Une chaîne échappée est indiquée en plaçant un tilde (~) avant et après la chaîne. Cette approche demande effectivement à LESS-CSS de conserver le contenu de la chaîne sans aucune modification.

Par exemple :

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

Lors de la compilation, cela affichera :

width: calc(100% - 200px);

comme vous le souhaitez.

Considérations supplémentaires

Si vous devez incorporer Less math dans votre chaîne d'échappement, vous pouvez utiliser une combinaison de chaînes d'échappement et d'opérations mathématiques. Par exemple :

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

Ceci sera compilé en :

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

N'oubliez pas que Less concatène les valeurs (chaînes échappées et résultats mathématiques) avec un espace 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!