Comment éviter de calculer calc en CSS3 lors de la compilation avec moins

Cette fois, je vais vous montrer comment calc en CSS3 n'est pas calculé lorsqu'il est compilé avec moins. Quelles sont les précautions sur la façon dont calc en CSS3 n'est pas calculé lorsqu'il est compilé avec moins. . Jetons un coup d'oeil.

Pour les développeurs front-end, Less ou Sass est déjà une compétence de base nécessaire. Avec cet outil, vous pouvez gagner beaucoup de temps de codage pour les développeurs front-end, vous permettant d'écrire du CSS en douceur, puis récemment. , j'ai trouvé quelques problèmes lors de l'ajout de calc à Less. J'ai écrit ceci dans Less :

p {width : calc(100% - 30px);}

En conséquence, Less a exécuté cela comme une expression arithmétique, et le résultat m'a été analysé comme ceci :

p {width: calc(70%);}

J'étais déprimé à ce moment-là. Comment cela a-t-il pu arriver ? Après diverses recherches, il a été constaté que la méthode de calcul de less chevauchait la méthode calc, et les deux étaient en conflit. J'ai donc réécrit la méthode d'écriture de calc dans Less comme suit :

p {width : calc(~"100% - 30px");}

OK, Le. le résultat de l'analyse est normal :

p {width: calc(100% - 30px);}

Cependant, comment remplacer 30px par une variable  ?

　　p {
　　@diff : 30px;
　　width : calc(~"100% - " + @diff);
　　}

Webstorm n'a pas signalé d'erreur, mais Grunt-less a signalé une erreur :

C:UserszhongWebstormProjectstest>grunt less

Exécution de "less:development" (moins ) tâche

>> ParseError : Entrée non reconnue dans style.less sur la ligne 4, colonne 2 :

>> ;> ; 4 width : calc(~"100% - " + @diff);

>> 5 }

Attention : Erreur de compilation de style.less Utilisez --force pour

continuer

.Avorté en raison d'avertissements.

J'ai donc écrit :

Il a été compilé avec succès, mais Webstorm a toujours provoqué

　　p {
　　@diff : 30px;
　　width : calc(~"100% - " @diff);
　　}

erreur de syntaxe

, bien qu'il puisse être compilé, il y a un message d'erreur dans le fichier, ce qui me rend mécontent J'ai cherché pendant longtemps et je n'ai pas trouvé comment

déboguer Paramétrage de l'erreur d'invite de syntaxe

Donc, je l'ai changé pour la manière d'écrire suivante :

Cette façon d'écrire peut être compilée et aucune erreur n'est signalée dans Webstorm, je préfère donc d'utiliser cette façon d'écrire, de cette façon, il n'y aura plus de problèmes.

　　p {
　　@diff : 30px;
　　width : calc(~"100% - @{diff}");
　　}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Animation de séquence d'animation CSS3

Comment utiliser le modèle de boîte bizarre CSS et le modèle de boîte standard

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!