Css calc() function, operator +

Question

I wanted to do something in CSS with the calc() function but I have a problem. I try to do this operation and have an error in console :

width: calc(~"33.33333333%" + unit(20, px));

Console show this message :

ParseError: Unrecognised input in C:path\translation.less on line 24, column 3:

23

24 .title {

25

Process finished with exit code 1

Yet if I do this, I have no error :

width: calc(~"66.66666667%" - unit(20, px));

Someone would be able to help me and make me understand why this error by changing the operator?

Thank you

In first snippet the error is thrown because you're trying to add number to a string. The second snippet is compiled fine just because there the `-` can be evaluated as CSS identifier instead of arithmetic minus (hence the whole expression in parens resolves to `(string identifier number)` statement which is OK, unlike `(string arithm-op number)`. — seven-phases-max, Nov 09 '14 at 23:22

score 4 · Accepted Answer · answered Nov 09 '14 at 18:41

4

Ok, I solve it with trying this :

~"calc(33.33333333% + 20px)";

And it's perfect working.

answered Nov 09 '14 at 18:41

Timtim

2

Alternatively it could be just `calc(100%/3 ~"+" 20px);` – seven-phases-max Nov 10 '14 at 03:28

1 Answers1