Инвертирование значения пикселя CSS-переменной

Question

Я использую переменные CSS, чтобы я мог легко вносить быстрые изменения.Одна из моих переменных - --gap: 15px, которую я использовал примерно 15 раз.Однако теперь мне нужно использовать инвертированное значение --gap, которое будет -15px.

Fails:

1. calc(0 - var(--gap))
2. calc(var(--gap) * -1)

Работы:

calc(var(--gap) - calc(var(--gap) * 2))

Вопросы:

• Первая попытка явно самая красноречивая, но почему не работает?

• Есть ли способ добиться этого, более красноречивый, чем третий способ?

Answer 1

Ваш первый пример отказа работает для меня, если я добавлю единицы к 0 части расчета.

Из spec :

Примечание: Так какs всегда интерпретируются как числа или s, «без единиц измерения 0» s не поддерживаются в calc ().То есть ширина: calc (0 + 5px);недопустимо, хотя обе ширины: 0;и ширина: 5 пикселей;действительны.

:root {
  --gap: 15px;
}

div {
  margin-top: calc(0px - var(--gap));
}

<div>text</div>

Ваш второй пример неудачи работает на меня.

:root {
  --gap: 15px;
}

div {
  margin-top: calc(var(--gap) * -1);
}

<div>text</div>

Я протестировал оба примера в Firefox 64, Chrome 71 и Safari 12 (все Mac).