Expressions with nested parentheses #1030

zikkoerik opened this Issue Dec 3, 2013 · 4 comments


None yet

4 participants


When working with retina-sized graphics and design PSD's, I often want to keep measurements in actual pixels and divide by two. This is neat, but in situations where I want an expression first, then do the division (such as subtracting padding from a height), I get a "nested" expression that doesn't seem to be supported. For example:

height: ((100px-22px)/2);


height: 100px -22px/2;

where I would expect:

height: 39px;

There might be some syntax-related reason why this can't be implemented, I just haven't though of any yet. And I'm sure I could use variables, mix-ins or something else to achieve the same thing, it just seems to me that this should work as well.

Otherwise, this being my first issue post: Yay for Sass!

lolmaus commented Dec 3, 2013

A hyphen in Sass can be part of variable name, so... H2O: Just Add Water!

height: ((100px - 22px) / 2);
nex3 commented Dec 14, 2013

This isn't actually caused by the hyphen being consumed as part of an identifier, nor does it have anything to do with nested parentheses. It's caused by the space operator plus the unary - operator having higher precedence than the binary minus.

I think this is misleading enough that it's worth fixing. My instinct is that it's unlikely that anyone is relying on this behavior; browsers don't seem to consider 10px-20px to be a valid substitute for 10px -20px. I'm fine with fixing this without a deprecation period. @chriseppstein, what do you think?



Chris Eppstein
Sent via Intro for iPhone


Well, I was perfectly satisfied with the first answer, although I haven't had time to test it yet. Silly of me not to try adding the whitespace myself. I guess I'm just not used to hyphens being valid characters in variable names and such, but it does make sense in the CSS context.

If there is a slight risk of anyone or anything expecting 10px-20px to be the same as 10px -20px, maybe you could go the same way as with the division operator, to have it interpreted as such only if it is part of an expression or enclosed in parentheses? Just an idea - I'm sure you'll see and do what's best.

Anyway, I'm glad this resulted into something that you considered worth fixing!

@nex3 nex3 closed this Jan 23, 2014
@nex3 nex3 added a commit that referenced this issue Jul 10, 2015
@nex3 nex3 Fix minus/hyphen ambiguity again.
Although in most places we disallowed hyphenated units, they were still
included in static value parsing. This meant that a property with no
other SassScript could still have 20px-10px interpreted incorrectly.

See #1030 and #1105.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment