How to use the Calc() attribute in the LESS Preprocessor

Asked

Viewed 52 times

1

When using the attribute Calc() in LESS I came across the following problem:

When compiling the code height: -webkit-calc(100vh - 6em); the output resulted in the calculation of 100 - 6 and adds the unit of the first value to the end.

inserir a descrição da imagem aqui

How to solve this problem?

1 answer

1


There are two solutions.

The first would be to remove the Calc() of the LESS file, and placing it directly in the output CSS or even inline in the respective HTML file. This however generates a great discomfort without talking that seems a bit gambiarra.

The second solution was that after much research I found a code escape which the CPU itself makes available so that accounts are not executed. It works like this: you pass ~"" and inside the quotes go the operator that should not be compiled.

Example:

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


Upshot:

inserir a descrição da imagem aqui

The operation is not compiled by LESS and calculated in the browser.

Now yes, working in the right way.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.