1

Ao utilizar o atributo calc() no LESS me deparei com os seguinte problema:

Ao compilar o código height: -webkit-calc(100vh - 6em); o output resultava no calculo de 100 - 6 e adiciona a unidade do primeiro valor ao final.

inserir a descrição da imagem aqui

Como se resolve esse problema?

1 Resposta 1

1

Há duas soluções.

A primeira, seria retirar o calc() do arquivo LESS, e colocando-o diretamente no output CSS ou até mesmo inline no respectivo arquivo HTML. Isso porem gera um grande desconforto sem falar que parece um tanto gambiarra.

Já segunda solução, foi que após muita pesquisa encontrei um código de escape que o próprio pre-processador disponibiliza para que as contas não sejam executadas. Ele funciona da seguinte forma: você passa ~"" e dentro das aspas vão o operador que não deve ser compilado.

Exemplo:

height: -webkit-calc(100vh ~"-" 6em);


Resultado:

inserir a descrição da imagem aqui

A operação passa a não ser compilado pelo LESS e calculado no navegador.

Agora sim, funcionando de maneira correta.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .