calc() not parsing

[ryivhnn]

Hey hey

Nice work on the Sassy + prepro + this :) Ran into a slight snag while refactoring one of my projects, something (I took a stab and guessed sass hence why this is here and not in the Sassy queue) isn't liking css calc(), it works fine in my straight css doc, in the scss I'm getting the "incompatible units" error. Sass apparently supports it, not sure as of when, guessing recently as I seem to recall you're slightly behind the ruby version.

Is there a way to get them to play nicely or do I just have to wait til it's caught up?

thanks :)

[richthegeek]

It's probably that it's calculating the input arguments before trying to run the function - so when do you do:

calc(32px * 3) it resolves to calc(96px) and then says "Can't do calc, move on".

The actual issue is therefore that the calculation isn't supported.

Can you post the calculation you are using?

[ryivhnn]

Blargh, I know I started typing a response to this a few days ago; I'm constantly getting distracted anf forgetting to press "submit" buttons on everything :)

The calc thing is just css3's calc() function - it looked something like this:

#content {
  width: calc(100% - 20em);
}

Oddly mixing units seems to work in font declarations at least, where my attempt at doing:

body {
  font: 10pt/1.5em "Optima", "Monaco", "Verdana";
}

resulted in teeny tiny font. Maybe it just doesn't like adding or subtracting mixed units, or mixing percentage with anything :).

[richthegeek]

In the first example we are mixing percentages and ems - unfortunately, there is no way to combine the two in a calculation in a meaningful way (or at least not one specified by TRC). So in this case the compiler chokes because "incompatible units"

In the second example, the 10pt/1.5em is seen as an equation, and because pt and em are valid, we perform the calculation resulting in whatever.

However, TRC actually doesn't think of 10pt/1.5em as valid and tries not to parse stuff that looks like X/Y that are font-sizes.

Anyway, back to why the calc(100% - 20em) fails in PHPSass and not TRC - TRC holds a list of CSS functions to avoid parsing, which PHPSass doesn't. This is something that needs to be added.

For now, you should be able to do something like: width: calc(unquote("100% - 20em"))

I know it's not ideal, but that's all that works for the moment...

[ryivhnn]

It's not a big deal, I eventually got around the problem using four lots of @media statements and can keep doing so. Am quite happy to wait til whenever you get around to it. Thank you for your work :)

I'll let you leave this open as a reminder to do that thing you said needs doing or close it as you like :)