Less.js: border-radius n'analyse pas correctement

Créé le 6 févr. 2020 · 3Commentaires · Source: less/less.js

si le rayon de bordure contient un /, alors il semble que moins pense que c'est une division ...

reproduire:

.border-radius {
  border-radius: 34px 0 0 36px / 34px 0 0 36px;
  border-radius: 10px 100px / 120px;
}

produit :

.border-radius {
  border-radius: 34px 0 0 1.05882353px 0 0 36px;
  border-radius: 10px 0.83333333px;
}

... ce qui est faux. vous pouvez voir qu'il s'agit d'une syntaxe valide ici :
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

Source

heavyk

👍2

Commentaire le plus utile

Ce problème peut être vu dans ce cas de test que j'ai créé. Affichez le CSS compilé pour voir comment LESS le rend.

@heavyk et pour quiconque trébuche mon cas de test .

Au lieu d'écrire...
border-radius: 10px 100px / 120px;

écrivez
border-radius: 10px 100px ~"/" 120px;

dans votre LESS et il devrait l'analyser correctement, en laissant le caractère / seul et ne pas l'interpréter comme un caractère indiquant qu'une division doit avoir lieu.

kbav le 18 févr. 2020

👍2

Tous les 3 commentaires

Ce problème peut être vu dans ce cas de test que j'ai créé. Affichez le CSS compilé pour voir comment LESS le rend.

@heavyk et pour quiconque trébuche mon cas de test .

Au lieu d'écrire...
border-radius: 10px 100px / 120px;

écrivez
border-radius: 10px 100px ~"/" 120px;

dans votre LESS et il devrait l'analyser correctement, en laissant le caractère / seul et ne pas l'interpréter comme un caractère indiquant qu'une division doit avoir lieu.

kbav le 18 févr. 2020

👍2

ah cool, savoir s'en échapper est utile, merci !

heavyk le 24 févr. 2020

Fermeture car cela a plusieurs solutions de contournement. L'autre est de changer le mode mathématique comme dans http://lesscss.org/usage/#less -options-math