Less.js: border-radius não analisa corretamente

Criado em 6 fev. 2020 · 3Comentários · Fonte: less/less.js

se o raio da borda tem um / nele, então parece que o less pensa que é divisão ...

reproduzir:

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

produz:

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

... o que está incorreto. você pode ver que esta é uma sintaxe válida aqui:
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

Fonte

heavyk

👍2

Comentários muito úteis

Esse problema pode ser visto neste caso de teste que criei. Visualize o CSS compilado para ver como o LESS o renderiza.

@heavyk e para qualquer outra pessoa que se deparar com isso, observe que você pode escapar caracteres em LESS, que é uma ferramenta útil para contornar problemas de análise. Isso também é mostrado no meu caso de teste .

Em vez de escrever ...
border-radius: 10px 100px / 120px;

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

em seu LESS e ele deve analisá-lo corretamente, deixando o caractere / sozinho e não interpretá-lo como um caractere indicando que uma divisão está para ocorrer.

kbav em 18 fev. 2020

👍2

Todos 3 comentários

Esse problema pode ser visto neste caso de teste que criei. Visualize o CSS compilado para ver como o LESS o renderiza.

Em vez de escrever ...
border-radius: 10px 100px / 120px;

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

em seu LESS e ele deve analisá-lo corretamente, deixando o caractere / sozinho e não interpretá-lo como um caractere indicando que uma divisão está para ocorrer.

kbav em 18 fev. 2020

👍2

ah legal, saber como escapar ajuda, obrigado!

heavyk em 24 fev. 2020

Fechar, pois, tem várias soluções alternativas. A outra é alterar o modo matemático como em http://lesscss.org/usage/#less -options-math