calc( ) function

Definition

calc( ) is a feature that lets you perform mathematical calculations when you specifying CSS property values.

Example

width: calc(100% - 50px);

Features

1. Mix and match the units: you can subtract a pixel size from the percentage size 
2. Nest calc( ): you can nest calculations inside other calculations, and use it with CSS variables
   
3. Good browser compatibility: even down to IE 9

Example of nested calc()

.foo {
	--widthA: 100px;
	--widthB: calc(var(--widthA) / 2);
	--widthC: calc(var(--widthB) / 2);
	width: var(--widthC);

Note

The + and – operators must be surrounded by whitespace.
* and / operators do not require whitespace, but adding it for consistency is recommended.

Reference

How do you use calc() in CSS? [LINK]

calc() MDN web docs [LINK]

]]>