“This article has participated in the good article summoning order activity, click to view: back end, big front double track submission, 20,000 yuan prize pool for you to challenge”

Problem with Css3 calc() in Less

background

These two days in writing style, encountered this strange strange problem, so it was recorded

Let me write it the way I’m used to

.block {
    overflow-y: auto;
    height: calc(100% - 56px);
}
Copy the code

Compiled code

.block {
    overflow-y: auto;
    height: -webkit-calc(44%);
    height: calc(44%);
}
Copy the code

😱 Obviously the result is not what we want, Less has helped us calculate the value of 100% – 56px in advance

Check the local Less version

"less": "^ 2.7.2." "."less-loader": "3.0.0".Copy the code

solution

Plan a

• We open the documentation for Less and go to the Operations section

After reading this, we can understand why the result is 44% (first calculate 100-56, then take the first unit first, which is %, finally get 56%).

Back to our problem, we don’t want Less to do one more thing for us, in short, we don’t need you to calculate it for me, just treat it as a string

• We went to the Escaping chapter

Now, we know how to escape, right

Let’s escape the code

.block {
    overflow-y: auto;
    height: calc(~"100% - 56px");
}
Copy the code

Code Compiled code

.block {
    overflow-y: auto;
    height: -webkit-calc(100% - 56px);
    height: calc(100% - 56px);
}
Copy the code

Less does not handle our escaped string, and our problem is solved 😀

Scheme 2

Simple violence, upgrade less and less-loader, the problem can also be solved

"less": "3.13.1"."less-loader": "5.0.0"
Copy the code

The last

As the project is not personal, upgrading loader may affect the stability of the project, so it is safe to come to 😂

Good study will not be bad, I am 970, we make progress together