Setting A Negative Value With Custom Properties

Written by Ted Krueger

I want to show a quick demo of how you can use custom properties and set them to a negative value. I don’t want to bore you with any explaination. This ain’t no Pintrest recipe about a great german potato salad. Let’s check out the code.

--header-height: 150px;

header {
  height: var(--header-height);
}

.other-class-that-needs-negative-something {
  margin-top: calc(var(--header-height) * (-1));
}

Now I’ll explain. If you were to try -#{var(--header-height)} you would get something like, margin-top: -var(--header-height), which the browser will not know what to do with. You can instead use the calc() css function to take your variable and multiply it by -1, boom.