The CSS calc() function

The CSS calc() function | Definition, Syntax & Example | Nested calc() with CSS Variables

by

CSS calc variables: The calc() functions help us to perform the basic mathematic operations in the stylesheet itself. It specifically helps us to calculate, suppose, the size of the body except for the header and footer. Also, it supports us to subtract or add some absolute value with a percentage value. Just dive into this tutorial and get a good grip on the CSS calc() function. 

CSS calc() Function

The calc() function is an inbuilt function in CSS that is utilized to do calculations based on CSS property. It can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.

Syntax:

calc( Expression )

Parameters:

The CSS calc() function allows a mandatory single parameter Expression that results in a value. This parameter contains a mathematical expression that needs to implement. The following operators can be returned any expression by using standard operator precedence rules:

(+)Addition
(-)Subtraction
(*)Multiplication: At least one of the arguments must be a <number>.
(/)Division: The right-hand side must be a <number>.

The operands in the expression may be any <length> syntax value. You can use various units for each value in your expression if needed. Also, you may utilize parentheses to establish computation order when required.

Also Refer:

Example:

div {
    max-width: calc(80% - 100px)
}

This returns a length value.

Example Using calc() Function:

Below example code, illustrates the calc() function in CSS

<!DOCTYPE html>
<html>
    <head>
        <title>calc function</title>
        <style>
            .geeks {
                position: absolute;
                left: 50px;
                width: calc(100% - 20%);
                height:calc(500px - 300px);
                background-color: green;
                padding-top:30px;
                text-align: center;
            }
            .bg {
                font-size:40px;
                font-weight:bold;
                color:white
            }
            h1 {
                color:white;
            }
        </style>
    </head>
    <body>
        <div class = "geeks">
            <div class = "bg">BtechGeeks</div>
            <h1>The calc() Function</h1>
        </div>
    </body>
</html>

Formal syntax

calc( <calc-sum> )

where 
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*

where 
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*

where 
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

Useful points on calc() in CSS

  • The arithmetic operators add (+) and subtract (-) must constantly be surrounded by whitespace. Unless the expression will be addressed as an invalid expression. As an instance, calc(60%-4px) will be invalid because it is parsed as a percentage, accompanied by a negative length. At the same time, the expression calc(60% – 4px) will be parsed as a subtraction operator and a length.
  • Although the operators * and / does not needs whitespace, but it is urged to add it for consistency.
  • Nesting of calc() function can be possible.

Nested calc() with CSS Variables

By considering the following code, you can easily usecalc()function with CSS variables:

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

Once all variables are expanded, widthC's value will be calc( calc( 100px / 2) / 2), then when it’s assigned to.foo'swidth property, all inner calc()s (no matter how deeply nested) will be grounded to just parentheses, so the width property’s value will be eventually calc( ( 100px / 2) / 2), i.e. 25px. In a nutshell: a calc() inside of a calc()is equal to just parentheses.