Less.js: border-radius no se analiza correctamente

Creado en 6 feb. 2020 · 3Comentarios · Fuente: less/less.js

si el radio del borde tiene un / en él, entonces parece que Less piensa que es una división ...

Reproducir:

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

produce:

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

... lo cual es incorrecto. puedes ver que esta es una sintaxis válida aquí:
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

Fuente

heavyk

👍2

Comentario más útil

Este problema se puede ver en este caso de prueba que creé. Vea el CSS compilado para ver cómo lo procesa MENOS.

@heavyk y para cualquier otra persona que se tropiece con esto, tenga en cuenta que puede escapar de los caracteres en LESS, que es una herramienta útil para solucionar problemas de análisis. Esto también se muestra en mi caso de prueba .

En lugar de escribir ...
border-radius: 10px 100px / 120px;

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

en su LESS y debería analizarlo correctamente, dejando el carácter / solo y no interpretarlo como un carácter que indica que se va a realizar una división.

kbav en 18 feb. 2020

👍2

Todos 3 comentarios

Este problema se puede ver en este caso de prueba que creé. Vea el CSS compilado para ver cómo lo procesa MENOS.

En lugar de escribir ...
border-radius: 10px 100px / 120px;

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

en su LESS y debería analizarlo correctamente, dejando el carácter / solo y no interpretarlo como un carácter que indica que se va a realizar una división.

kbav en 18 feb. 2020

👍2

Ah, genial, saber cómo escapar es útil, ¡gracias!

heavyk en 24 feb. 2020

Cerrando ya que esto tiene varias soluciones. El otro es cambiar el modo matemático como en http://lesscss.org/usage/#less -options-math