Thecalc()function in CSS3 allows us to perform mathematical operations with any attribute value. For example, we can use calc()to specify the width of a css element using pixel values.

.foo {
  width: calc(100px + 50px);
}

 

WHY DO WE NEED THE CACL() FUNCTION

If you have used any CSS preprocessor, such as SASS, you might have encountered the following example

.foo {
    width: 100px + 50px;
}

// Or using SASS variables
$width-one: 100px;
$width-two: 50px;
.bar {
    width: $width-one + $width-two;
}

However, the calc()function provides a better solution. First, we can combine different units. In particular, we can mix and match absolute units (such as percentages and viewport units) and relative units (such as pixels). For example, we can create an expression that subtracts a pixel value by a percentage.

.foo {
    width: calc(100% - 50px);
}

In this case, the .fooelement is always smaller than its parent element by 50px in width.

Secondly, to use the calc()function, the computed value is the expression itself, not the result of the expression. When using a CSS preprocessor to do math, the given value is the result of an expression.

// Value specified in SCSS
.foo {
    width: 100px + 50px;
}

// Compiled CSS and computed value in browser
.foo {
    width: 150px;
}

However, the browser parses the calc()value as the original calc()expression.

// Value specified in CSS
.foo {
    width: calc(100% - 50px);
}

// Computed value in browser
.foo {
    width: calc(100% - 50px);
}

This means that the value in the browser can be more flexible and responsive to changes in the viewport. We can set the element height to the height of the viewport minus an absolute value, which will be adjusted as the viewport changes.

USING CALC()

calc() function can be used to perform four arithmetic operations on numeric attributes. 

  • Frequency
  • Angle
  • Time
  • Number or Integer 
.foo {
    width: calc(50vmax + 3rem);
    padding: calc(1vw + 1em);
    transform: rotate( calc(1turn + 28deg) );
    background: hsl(100, calc(3 * 20%), 40%);
    font-size: calc(50vw / 3);
}

 

NESTING CALC()

calc()functions can be nested. Inside the function, it is treated as a simple parenthetical expression, as the following example shows.

.foo {
    width: calc( 100% / calc(100px * 2) );
}

The calculated value of the function is as follows:

.foo {
    width: calc( 100% / (100px * 2) );
}

CALC() FUNCTION SUPPORT

If the browser does not support the calc()function, the entire property value of the expression will be ignored. But we can not support those browsers, using a fixed value as a fallback.

.foo {
    width: 90%; /* Fallback for older browsers */
    width: calc(100% - 50px);
}

Cool benefits of the CALC() function.

1. Centering Elements on a Page

The calc()function provide us with solutions to centering a element vertically on a page. If we know the size of the element, a typical solution is to use the negative margin to move the element by half of the distance, as follows:

// Assuming .foo is 300px height and 300px width
.foo {
    position: absolute
    top: 50%;
    left: 50%;
    marging-top: -150px;
    margin-left: -150px;
}

Using the calc()function, we only need the top and left properties and we will be able to achieve the same effect:

.foo {
    position: absolute
    top: calc(50% - 150px);
    left: calc(50% - 150px);
}

​Using Flexbox, this method is rarely needed. However, in some cases Flexbox may not be used. For example, if the elements need absolute positioning or fixed positioning, this method is useful.

2. Create a root grid size

Using remcalc()function can be used to create a viewport-based grid. We can set the font size of the root element to be part of the width of the viewport.

html {  
    font-size: calc(100vw / 30);
}

Now, the 1remwidth of the viewport is 1/30. Any text on the page will be automatically scaled based on your viewport. Further, the same percentage of viewports always show the same amount of text regardless of the true size of the viewport.

If we use non-text remsets the size, they also comply with the act. An element of width 1rem is always 1/30 of the width of the viewport element.

3. Makes Calculation Clearer

Finally, calc()make the calculation clearer. If you make a set of items equal to one-sixth of the width of their parent element container, you probably write:
.foo {
    width: 16.666666667%;
}
However, it is clearer and more readable:
.foo {
    width: calc(100% / 6);
}
Using calc(), we can do more things, such as creating a grid system . It is one of the most useful new features of CSS.