How to Use Calc() Inside Another Function

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

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

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);

How can I use a calculated value of a function in another function in another Python file?

I think that your misunderstanding is because you think a function is like a script that has been run and modified a.global state. That's not what a function is. A function is a series of actions performed on its inputs (ignoring closures for a minute) which returns some results. You can call it many times, but without calling it, it never executes. Once it stops executing all its variables go out of scope.

You can import and call a function though. So you can change the return type of Interpolation to return everything you need somewhere else. E.g.

def Interpolation(...):
...
return {'z': z, 's': s}

Then somewhere you import that function, call it, get back all the data you need, then pass that to your other function.

import Interpolation from derivation
# get z and s in a dict result
result = Interpolation(...)
# pass s as well as the other argument to your other function
horizontalAcceleration(strideData, result['s'])

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

CSS transform property with calc

It works if you respect a white space in between calc values and signed used : transform: translate(calc(100vw - 2vw));

div {  border:solid;  float:right;  height:20vw;  width:20vw;  transform:translate( calc(-100vw + 25vw) );}

<div><p>Do not forget !<br/>use prefix if needed !!!</p><p>BTW, i float right</p></div>

How to make a function add to another function, whenever it is called?

Have CALCMethod take an int argument and return that int + 4. then you can call it once or with a loop however many times you like.

public int CALCMethod(int i) {
    return i + 4;
}

then inside CALC:

public int CALC() {
   return CALCMethod(10 * 60 + 5);
}

And with a loop:

public int CALC() {
   int number = 10 * 60 + 5;
   for (int z = 0; z < 5; z++) {
       CALCMethod(number);
   }
   return number;
   
}

---

Related Topics