- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Fri, 13 Nov 2015 11:33:28 -0600
- To: Philip Walton <philip@philipwalton.com>
- Cc: www-style list <www-style@w3.org>
On Sun, Nov 8, 2015 at 12:51 PM, Philip Walton <philip@philipwalton.com> wrote: > For example, if I have a gutter size and I want to use the positive version > in a child element margin and then negate that in the parent element's > negative margin, currently I'd do something like this: > > ``` > .parent { > margin: -1em; > } > .child { > margin: 1em; > } > ``` > > If I try doing the same thing with custom properties in Firefox is fails. > I'm assuming that's a bug, but I wanted to ask here to make sure. > > ``` > .parent { > --gutter: 1em; > margin: -var(--gutter); /* declaration ignored in FF */ > } > .child { > margin: var(--gutter); > } > ``` > > To make this work in FF today you have to do `calc(-1*var(--gutter))`, which > isn't ideal. As Boris says, FF's behavior is correct. `-var(...)` is a function named -var, which is not a variable reference. You can't negate functions like that *anywhere* due to the way ident parsing works; it's not specific to variables. But even if we ignore the ident parsing issue, per the Syntax spec the - sign is part of the number token, not a separate token. So in your example, it's similar to typing `margin: -/**/1em;`, which is an error. (This was not an error in 2.1's grammar, but basically every subsequent grammar fucked this up and didn't technically allow negative numbers as a result, so I just made it act like people expect.) The correct way to modify a numeric variable is through calc(). Negating is no different from doubling. ~TJ
Received on Friday, 13 November 2015 17:34:17 UTC