4

Why this one calc(100vw/4) works but neither of the following do?

  1. calc(100vw/4-(10-4))
  2. calc(100vw/4-(10px-4))
  3. calc(100vw/4-(10px-4px))
  4. calc(100vw/4-calc(10px-4px))

How do I manage the expression calc(100vw/x-(10px-x)) where x gets replaced in a SASS loop to work?

HoldOffHunger
  • 18,769
  • 10
  • 104
  • 133
super.t
  • 2,526
  • 7
  • 32
  • 51
  • 2
    CSS is not a programming language, so it is not possible to do complex calculations, and it shouldnt be. – Matthias Seifert Oct 25 '17 at 11:32
  • But you can see mentions of nested calcs here and there on the internet. So only one operator and no nesting? – super.t Oct 25 '17 at 11:43
  • @MatthiasS. i don't agree with you. Even if CSS is not a programming language we may sometimes consider doing some complex calculations in order to obtain some results. For sure we need first to look for simple solution but sometimes we need complex one. – Temani Afif Oct 25 '17 at 11:55
  • @TemaniAfif If you really need to make such complex calculations, then you should use Javascript or a preprocessor, which supports this and generates pure CSS. CSS should stay as simple as possible – Matthias Seifert Oct 25 '17 at 12:05
  • @MatthiasS. in this case why there is `calc` in CSS ? and why we can nest `calc` operation ? there is a reason : for example a designer with no programming knowledge like JS will be able to use these kind of stuffs in order to do what he want. – Temani Afif Oct 25 '17 at 12:09
  • @MatthiasS guys the reason I use calc in this case is to define some defaults **while JS is not fired yet**. Further these calculations are going to be handled by JS, when it's started. – super.t Oct 25 '17 at 12:26
  • @TemaniAfif For me iIts just the seperation of concerns, CSS should not make calculations. But I know it can be useful, and it is just an opinion, its ok to disagree. – Matthias Seifert Oct 25 '17 at 12:32

1 Answers1

13

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>

enter image description here

Same logic when dealing with max(),min() and clamp() since they accept the same argument as calc()

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

Temani Afif
  • 245,468
  • 26
  • 309
  • 415