Parse Errors When Using Calc with Rem and Px

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

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

CSS3 calc() validation: Value Error : width Parse Error

This appears to be a bug in the validator. Your calc() syntax is valid. Don't worry about it.

Whenever you need to validate your CSS, remove just that declaration so it does not cause irrecoverable parse errors.

W3C CSS validation error using calc() and vendor extensions

Don't worry about the vendor extensions. I don't recall why they are flagged that way but they are not errors on your part. I don't recall the reasoning for it. iirc, there is a checkbox to ignore these warnings.

The explanation may lie in this article where it states:

Vendor-specific extensions (mostly) do adhere to the CSS 2.1 grammar,
but since they are not defined in the CSS 2.1 specification, they are
invalid. Hence the CSS validator is correct in reporting them as
validation errors.

W3c validation error while using sass arithmetic operator

max-width: 1360px + 280px + 40px; is not valid css. You can calculate the width in sass: max-width: 1360px + $paddingXL * 2 + 40px;. Just remove #{}.

height: calc(100%) not working correctly in CSS

You need to ensure the html and body are set to 100% and also be sure to add vendor prefixes for calc, so -moz-calc, -webkit-calc.

Following CSS works:

html,body {
    background: blue;
    height:100%;
    padding:0;
    margin:0;
}
header {
    background: red;
    height: 20px;
    width:100%
}
h1 {
    font-size:1.2em;
    margin:0;
    padding:0;
    height: 30px;
    font-weight: bold;
    background:yellow
}
#theCalcDiv {
    background:green;
    height: -moz-calc(100% - (20px + 30px));
    height: -webkit-calc(100% - (20px + 30px));
    height: calc(100% - (20px + 30px));
    display:block
}

I also set your margin/padding to 0 on html and body, otherwise there would be a scrollbar when this is added on.

Here's an updated fiddle

http://jsfiddle.net/UF3mb/10/

Browser support is:
IE9+, Firefox 16+ and with vendor prefix Firefox 4+, Chrome 19+, Safari 6+

Sass calculate percent minus px

Sass cannot perform arithmetic on values that cannot be converted from one unit to the next. Sass has no way of knowing exactly how wide "100%" is in terms of pixels or any other unit. That's something only the browser knows.

You need to use calc() instead. Check browser compatibility on Can I use...

.foo {
    height: calc(25% - 5px);
}

If your values are in variables, you may need to use interpolation turn them into strings (otherwise Sass just tries to perform arithmetic):

$a: 25%;
$b: 5px;

.foo {
  width: calc(#{$a} - #{$b});
}

---

Related Topics