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

> De : Xidorn Quan [mailto:quanxunzhen@gmail.com]
> On Mon, Nov 9, 2015 at 8:37 AM, Boris Zbarsky <bzbarsky@mit.edu> wrote:
> > On 11/8/15 1:51 PM, Philip Walton wrote:
> >>
> >> 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.
> >
> >
> > The Firefox behavior seems correct to me per spec at first glance,
> > though the spec could be clearer about this for sure.  The issue
> > you're running into is var() substitutes a sequence of tokens, not a
> > string to be retokenized.  This is the part that could be spelled out more
> clearly.
> >
> >> .parent {
> >>    --gutter: 1em;
> >>    margin: -var(--gutter); /* declaration ignored in FF */
> >
> >
> > So the value of the custom property in this case is the sequence of
> > tokens [1em].
> >
> > The value of 'margin' is then the sequence of tokens ['-', 1em] which
> > is not the same thing as the single token [-1em].

This is right. "CSS Variables" are some form of "Token Stream Reference" as I call them in the sense that they replace tokens, not chars. As a matter of fact, you can pretty much insert /**/ before and after the var(...) declaration to see how it would be interpreted.

    padding: -/**/1em; 

doesn’t work, so doesn't 

    padding: -/**/var(...);

> > See also example 11 at
> > https://drafts.csswg.org/css-variables/#example-3ab19e31 (as of today;
> > I wish I could perma-link editor's draft versions), which is pretty
> > much exactly your situation, right?
> 
> I think in this specific case, the declaration is dropped even earlier. The parser
> should consider the whole "-var" as an unknown token.

Good catch. Things would be different if we did things like

    padding: var(--size).5px;
    --size: 3;

This shouldn't work as per Boris comment.

What you need to writeis:

    padding: calc(var(--size) + 0.5px);

Or in your case

    padding: calc(var(--size) * -1);

My initial proposal was to allow some math in the equivalent of "var" which would have made things less verbose, something like this:

    padding: calc(--size * -1);

And that's why I wanted "||" as the "fallback value" operator, so that you could use it anywhere in the expression. But I think this ship sailed, for now.

Best regards,
Francois

Received on Sunday, 8 November 2015 23:11:53 UTC