Re: [css-variables] Is making a property negative via `-var(--width)` valid syntax?

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