Ex:calc(10px + 2px); is correct
but
calc(10px +2px); gives out an error
or
calc(10px - 2px); is correct
but
calc(10px -2px); gives out an error. However, this doesn't apply to other operators
            Asked
            
        
        
            Active
            
        
            Viewed 154 times
        
    -1
            
            
         
    
    
        Amr
        
- 119
- 1
- 10
- 
                    3How does it otherwise know that the `-` is supposed to be a minus and not part of a negative number – Reyno Jul 23 '23 at 16:54
- 
                    That's why I included the `+` operator example because it shouldn't matter in that case – Amr Jul 23 '23 at 16:55
- 
                    2Because the operation might get a little more complicated than `calc(10px +2px);`, like `calc(5px+-1px);` can't really work (it's `calc(5px + -1px);`? So it's always better to have whitespaces, even it looks nice. – Sally loves Lightning Jul 23 '23 at 17:05
- 
                    2@Amr - it doesn't matter in the case of `+` for technical reasons. It's just required for consistency with `-`. The CSSWG resolution is here: https://lists.w3.org/Archives/Public/www-style/2008Nov/0147.html - see the last resolution on the page. The discussion about the real reason why the hyphen is problematic begins here: https://lists.w3.org/Archives/Public/www-style/2008Mar/0173.html (it's not about negative numbers) – Alohci Jul 23 '23 at 22:37
1 Answers
6
            For the + operator, the operation might get a little more complicated than calc(10px + 2px);. I mean something like calc(5px + -1px); is actually more complicated, and it can't be calc(5px+-1px);.
For the - operator, how CSS is supposed to know whether the - is the minus operator or a part of a negative number? I mean logically though.
Also, the whitespaces make the code nice to read, for humans.
Learn more about the CSS calc() function in the documentation.
 
    
    
        Sally loves Lightning
        
- 952
- 16
- 
                    So is it just to look nice and parser constraints? Because unlike any other language, the whitespace don't really matter – Amr Jul 23 '23 at 17:23
- 
                    1
- 
                    2"*For the - operator, how CSS is supposed to know whether the - is the minus operator or a part of a negative number? I mean logically though.*" By using basic parsing rules, like 'is this symbol immediately preceded by another symbol'. – TylerH Jul 24 '23 at 14:17