Have you ever come upon the pleasure of doing math in your CSS or LESS code?

You might have noticed that this won’t work the way you probably tried it the first time. I tried something like this:

.my-element {
    width: 100px - 50vw;
}

For me this was completely logical. The width of my element is half the viewport width (50vw) subtracted by 100 pixels. But any browser ignores the second unit (vh in this case) and just sticks with pixels. So the width of my element was 50 always pixels.

TL;DR: There is a calc() function in CSS which does that for you. Just do it like this:

.my-element {
    width: calc(100px - 50vw);
}