Calc() Function Inside Another Calc() in CSS

calc() function inside another calc() in CSS

It is possible to use calc() inside another calc().

An example:

div{
  width: calc(100% - (1% + 30px));/* calc(1% + 30px) is nested inside calc()*/
}
div p{
  width: calc(100% - 30px);/*100% is total width of the div*/
}

---

Update on nested calc with css variables:

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

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

So, the current spec as well proves this using parentheses inside calc() is nested calc.

Learn more about css variables here.

How to use calc() with function inside?

Yes, you can write this in one line (without variable) using interpolation (#{...}):

font-size: calc(5px + #{get-vw(20px)});

demo (with example function): https://jsfiddle.net/wccoLefp/

Sass allows any text in these function calls, including nested parentheses. Nothing is interpreted as a SassScript expression, with the exception that interpolation can be used to inject dynamic values.

Sass: Special Functions

How to use calc() inside another function

You can use calc() wherever you can use a length based value in CSS. The example you have provided does work, but actually adds up to 0. Here is a slightly changed demo to illustrate: http://jsfiddle.net/joshnh/6ydR3/

Also, make sure to list the unprefixed version last.

Mixing percentages with other value types in the calc() function within a transform doesn't seem to work at all in Chrome. I'll report this as a bug.

UPDATE: This has been reported as a bug here: https://code.google.com/p/chromium/issues/detail?id=150054

Nested calc operations

Apparently you have to assign px or % to all numbers that are not being multiplied or divided.

width: calc((100% / 7) - 2px);

Well I feel dumb now. Haha.

How do I rewrite my nested CSS calc operation

Nested calc is fine, but note that is not supported in IE11. Also, you need to maintain the spacing convention:

p {
  padding: calc(calc(5px + 5px) + calc(5px + 5px));
  border: 1px solid black;
}

<p>Hello! I have a padding of 20px!</p>

How to nest calc-variables within other calc-variables in Sass?

You cannot nest calc() function inside another calc().

Current compiled CSS:

margin: calc(calc(25px - 10px) /4); /* Incorrect syntax */
padding: calc(calc(25px - 10px) *2); /* Incorrect syntax */

Solution:

Calculate the size variable directly.

$size: $height - 10px;

Forked Codepen

Using CSS Calc Function inside of Translate

From https://developer.mozilla.org/en-US/docs/Web/CSS/calc you need to mix values like this.

width: calc(100% - 80px);

CSS calc() function

You cannot divide by units, only by numbers.

CSS calc function does not center

You can use margin:auto; for adding space from both side. And you need to set it 100% - 28px

.container-card {

    background-color: grey;

    height: 500px;

   

  }

   .container-holder {

      background-color: gold;

      width: calc(100% - 28px);

      height: 300px;

      margin: auto;

    }

<div class="container-card">

    <div class="container-holder">

    </div>

  </div>

---

Related Topics