W3C home > Mailing lists > Public > www-style@w3.org > November 2015

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

From: Philip Walton <philip@philipwalton.com>
Date: Sun, 8 Nov 2015 10:51:35 -0800
Message-ID: <CAGRhNhXYuwADsVLQbUhhi-M8DBw0AgqJF0A8G3BpvXPYsUTLjw@mail.gmail.com>
To: www-style list <www-style@w3.org>
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.
Received on Sunday, 8 November 2015 18:52:05 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:58 UTC