CSS カスタムプロパティ (CSS変数) の数値を反転させて使いたい

あるCSSカスタムプロパティ(CSS変数)で定義してある数値を反転させた値で使いたいケースが稀にあります。

例

例えば親要素の padding をネガティブマージンで打ち消したいような場合、padding, negative margin の量を CSSカスタムプロパティ(CSS変数)にできると変更などにも対応しやすくなります

<div class="container">
  <div class="fill-container-inner">Fill Content</div>
</div>

<style>
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
.fill-container-inner {
  margin-left: -1rem;
  margin-right: -1rem;
}
</style>

CSSカスタムプロパティ(CSS変数) はそのまま数値反転できない

:root {
   --container-margin: 1rem;
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-margin);
  padding-right: var(--container-margin);
}
.fill-container-inner {
  margin-left: -var(--container-margin);
  margin-right: -var(--container-margin);
}

CSS カスタムプロパティが文字列展開だとすると、こんな感じで数値を反転できるかと思ったのですが -var(--container-margin) は無効とな動作しません。

`calc(variable * -1)` を使えばOK

計算コストがかかってしまうけど calc() を使って * -1 で CSSカスタムプロパティ(CSS変数) の数値を反転させることができる

:root {
   --container-margin: 1rem;
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-margin);
  padding-right: var(--container-margin);
}
.fill-container-inner {
  margin-left: calc(var(--container-margin) * -1);
  margin-right: calc(var(--container-margin) * -1);
}