Comment résoudre le problème si le calcul de CSS3 est calculé lorsque less est compilé ?

Cette fois, je vais vous montrer comment résoudre le problème si le calcul de CSS3 est calculé lorsqu'il est compilé avec moins. Quelles sont les précautions à résoudre si le calcul de CSS3 est calculé lorsqu'il est compilé avec moins. Ce qui suit est un cas pratique, jetons un coup d'œil.

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 :

div {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 :

div {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 :

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

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

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

Cependant, comment remplacer 30px par une variable ?

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

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

C:\Users\zhong\WebstormProjects\test>grunt less
Running "less:development" (less) task
>> ParseError: Unrecognised input in style.less on line 4, column 2:
>> 3    @diff : 30px;
>> 4    width : calc(~"100% - " + @diff);
>> 5 }
Warning: Error compiling style.less Use --force to continue.
Aborted due to warnings.

J'ai donc écrit comme ceci :

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

Il a été compilé avec succès, mais Webstorm Mais cela provoque toujours une erreur de syntaxe Bien qu'il puisse être compilé, il y a un message d'erreur lorsque je regarde le fichier, je me sens

et je me sens. mécontent. Je cherche depuis longtemps mais je ne trouve toujours pas comment déboguer les paramètres d'erreur d'invite de syntaxe dans Webstorm

Alors, je l'ai modifié pour la manière d'écrire suivante :

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

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

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour un contenu plus passionnant, veuillez faire attention au site Web chinois php Autres articles liés !

Lecture connexe :

Comment créer un effet d'animation de cercle en html5

En h5, la page mobile doit être zoomed Comment mettre en œuvre

Assurez-vous de prêter attention aux trois utilisations incorrectes courantes du HTML5

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!