59

Is it possible to use calc() to multiply or divide with unit-based values (like 100%, 5px, etc).

For example I was hoping to do something like this:

width: calc(100% * (.7 - 120px / 100%));

Hoping it resolved to something like (assuming 100% = 500px):

width: calc(500px * (.7 - 120px / 500px));
width: calc(500px * (.7 - .24));
width: calc(500px * .46);
width: calc(230px);

However after some experimenting it looks like I can't have a unit-based value as the denominator for division.

I also don't seem to be able to multiple two values together like 5px * 10px or 5px * 100%.

I know it doesn't make sense in 100% of the cases to allow this, but in my use-case, I'd like to know what percentage 120px is of the overall width, which I then feed in to the rest of my calculation.

Either that, or if someone could figure out a different way to write it, that would work as well. I've racked my brain and couldn't come up with anything.

dippas
  • 58,591
  • 15
  • 114
  • 126
samanime
  • 25,408
  • 15
  • 90
  • 139

2 Answers2

71

In CSS calc() division - the right side must be a <number> therefore unit based values cannot be used in division like this.

Also note that in multiplication at least one of the arguments must be a number.

The MDN has great documentation on this.

If you'd like a better way to do calculations you can use a preprocessor (I like Sass). That link will take you to their guides (on that page there's a section about operators).

Andrew Hendrie
  • 6,205
  • 4
  • 40
  • 71
  • Wow... I read that page like 5 times looking for that rule. I'm not sure how I missed it sitting right there next to the description of the operators. Thanks. That's what I was afraid of. I am actually using LESS, though the formula I gave you above I need to calculate with calc() since I need to know the width, which is variable. Back to the drawing board to find an all together different approach. Thanks for the definitive answer, at least now I know this way is a dead end. – samanime Apr 08 '15 at 07:19
  • 10
    Preprocessors can't handle as much as calc() can, since such calculations need to be done at render time, which makes something like Sass useless. – TylerH Jun 16 '16 at 18:58
  • That spec says both the numerator and the denominator can be numbers, shouldn't something like this then work: `calc(100 / 2)`? – Chris Conover Mar 29 '19 at 23:10
  • Yes, that works. The numerator can also be a unit such as px though. – Andrew Hendrie Apr 03 '19 at 11:15
  • 1
    If CSS's `calc()` function is restrained to such an *astronomical* degree, why is there no way to cast a variable as a number in CSS? As far as I know, there's no way to put CSS variables into SASS given that it's a preprocessor. – Logan Kling Feb 22 '23 at 11:49
12

For someone who is making a mistake like me, don't forget that you can't use Sass variables in CSS's calc function directly. For that, you have to use Sass's calculation method.

$test: 10px;

.testing{
    width: $test * 2;
}

Or if a calc implementation is necessary:

$test: 10px;

.testing{
  width: calc(50% + #{$test * 2}); // results in calc(50% - 20px)
}
LandonSchropp
  • 10,084
  • 22
  • 86
  • 149
Muhammad Awais
  • 1,608
  • 1
  • 21
  • 21