Why Must a + or - Be Surrounded with Whitespace from Within The Calc() Method

Why must a + or - be surrounded with whitespace from within the Calc() method?

The - character is one of the allowed characters in CSS idents. Judging by the resolution given here, it seems they wanted to prevent syntactic ambiguities that could arise from using - without whitespace, especially with keyword values such as min-content (although AFAIK keyword values aren't yet allowed within calc() — correct me if I'm wrong).

Not everyone agrees with this resolution, though.

Why is CSS calc(100%-250px) not working?

It's because you have to put a space between the + or - operator in order for it to work properly.

div {  background-color: blue;  height: 50px;  width: calc(100% - 250px);}

<div></div>

Why doesn't css-calc() work when using 0 inside the equation?

The first equation is invalid because it will lead to calc(-10px + 0)

Note: Because <number-token>s are always interpreted as <number>s or <integer>s, "unitless 0" <length>s aren’t supported in calc(). That is, width: calc(0 + 5px); is invalid, even though both width: 0; and width: 5px; are valid. ^ref

And if the result was non-zero you will fall into this:

At + or -, check that both sides have the same type, or that one side is a <number> and the other is an <integer>. If both sides are the same type, resolve to that type. If one side is a <number> and the other is an <integer>, resolve to <number>.

The last one is more logical since 10px + 5 has no meaning whearas we may think that 10px + 0 is simply 10px but for the browser it's not.

Related question: Why doesn't min() (or max()) work with unitless 0?

Width: calc() on img is not relative to parent container

MDN calc():

The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length. Even further, calc(8px + -50%) is treated as a length followed by a plus sign and a negative percentage.
The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.

The + operator must be surrounded by whitespace.

Therefore it should be width: calc(100% + 0.75em) rather than calc(100%+0.75em)

body {    width:340px;}.entry-content {    padding: 0 0.75em;    position:relative;}.entry-content img {    display:block;    margin: 0 -0.75em;    width: calc(100% + 0.75em);}

<div class="entry-content">    <p>        <img src="//placehold.it/200" />    </p></div>

Why the CSS calc() function is not working?

You need to add spaces between operators, it's a common mistake to forget them. We can also nest operation using calc as many as we want but they are equivalent to simple parentheses.

From the documentation:

Note: The + and - operators must be surrounded by whitespace. For
instance, calc(50% -8px) will be parsed as a percentage followed by a
negative length—an invalid expression—while calc(50% - 8px) is a
percentage followed by a subtraction operator and a length. Likewise,
calc(8px + -50%) is treated as a length followed by an addition
operator and a negative percentage.

The * and / operators do not require whitespace, but adding it for
consistency is both allowed and recommended.

Note: It is permitted to nest calc() functions, in which case the
inner ones are treated as simple parentheses.

.one {
  background: red;
  width: calc(100% - 150px);
  margin-top: calc(20px + calc(40px * 2)); /*Same as calc(20px + (40px * 2))*/
  height: calc(100px - 10px);
  padding: calc(5% + 10px) calc(5% - 5px);
}

<div class="one">

</div>

Is there a way to make the calc function work with the * operator in Sass?

You have to do the following:

$base-font-size: calc(100% + 0.25vw); 
$font-size--2: calc(#{$base-font-size} * 0.5);
$font-size--1: calc(#{$base-font-size} * 0.75);
$font-size-1: calc(#{$base-font-size} * 1.25);

width: calc() not working in Firefox

-moz-calc CSS function has been removed with Firefox 53. Just use calc and make sure you have white space between parameters:

correct:

width: calc(100% - 40px);

incorrect:

width: calc(100%- 40px);

Why is calc not working with rem and px combined?

You just need to add a space around the minus operator:

.test {
  background-color: gold;
  max-width: calc(24rem - 13px);
}

<div class="test">I have a max width</div>

A calc() value within a calc() value

For the sake of completeness, I will add an answer here (The solution has already been posted in the comments underneath the asker's question).

You don't need to use two calc() statements. It's sufficient for you to combine the calculations within one calc() statement. In this case, as Andrea Ghidini mentioned in a comment (refer to this link), the division will take precedence over the subtraction (basic math rules apply!).

So your solution would be:

width:calc(100% / 3 - 2px)

Also, make sure that additions and subtractions are surrounded by whitespaces, otherwise it will not work!

---

Related Topics