【CSS】 「変数」の値を正負（プラス／マイナス）反転する方法

こんにちは、さち です。

先日、ウェブサイトを作っていて、「CSS」の「変数」の数値を正負（プラス／マイナス）を反転して使いたいことがありました。

少し悩んだんですが簡単な方法で解決できたので、ど忘れした将来の自分のために備忘録を残しておきます。

コード

HTML

<div class="plus">＋</div>
<div class="zero">0</div>
<div class="minus">－</div>

CSS

:root {
  --value: 150px;
}

div {
  width: 100px;
}

.plus {
  margin-left: var(--value);
}

.zero {
  margin-left: 0;
} 

.minus {
  margin-left: calc( -1 * var(--value) );
}

変数 --value に 150px を代入し、この「変数」を使って -150px を作ります。

方法は calc() を使って -1 を掛けているだけ。非常にシンプルですね。

実行結果