Expecting RBRACE? What is CSS Lint talking about?

Question

CSS Lint thinks there is something wrong here. And so does the W3C CSS Validator. They are probably right and I am wrong, but can someone please help me understand why this is wrong?

CSS:

.my-class {
    width:  calc(((100% - 15%) / 3 - 1px) * 3 + 10%); /* for 3 columns */
}

Error message:

Expected RBRACE at line 2, col 22.

By the way, browsers seem to be more on my side.

Answer 1

It seems to be a problem with CSS Lint currently. Just a bit of bad parsing.

CSS3 calc is however still not a recommendation by W3C, but it looks very likely to be a standard soon. A warning would be the appropriate message from CSS Lint, of course.

Answer 2

Per this article it seems that calc() isn't supported very well.

2 years ago

The parser does not support calc()

It seems like it is sort of fixed, but not entirely.