Comment résoudre le problème selon lequel calc en CSS3 est calculé lorsque less est compilé

Cet article présente principalement des informations pertinentes sur la façon dont calc en CSS3 est calculé lors de la compilation. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

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é un problème lors de l'ajout de calc à Less. J'ai écrit ceci dans Less :

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

En conséquence, Less a traité cela comme une expression d'opération. Après l'avoir exécuté, le résultat a été analysé comme suit :

p {width: calc(70%);}

J'étais déprimé à ce moment-là. Comment un tel phénomène a-t-il pu se produire ? 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 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);
　　}

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

C:UserszhongWebstormProjectstest>grunt less

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

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

> > 3 @diff : 30px;

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

>> 🎜>Avertissement : Erreur lors de la compilation de style.less Utilisez --force pour continuer.

Avorté en raison d'avertissements.

Écrivez donc :

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

Il a été compilé avec succès, mais Webstorm n'arrêtait pas de signaler des erreurs de syntaxe. Bien qu'il puisse être compilé, il y avait un message d'erreur lorsque j'ai regardé le fichier Set

, je l'ai donc remplacé par le fichier Set. écriture suivante :

Cette façon d'écrire peut compiler et aucune erreur ne sera signalée dans Webstorm, donc je préfère utiliser cette façon d'écrire, donc il n'y aura pas de problèmes.

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

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Analyse sur la différence entre les attributs d'animation transformation et transition et les attributs d'animation en CSS3

Comment faire face à l'inconnu La hauteur du paramètre d'image est centrée verticalement

À propos de la méthode calc() en CSS3

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!