CSS variablesで変数をマイナス値で出力したい

(当記事は2018-01-20現在の情報です、仕様が変わって情報が古くなっているかもしれません)


CSS variablesを触っていて、定義した変数の値をマイナス値(negative value)で扱いたかった。

こんな感じでいけるだろうと思ったが…

:root {--block-position-top: 50px;}

.block {
  top: - var(--block-position-top); // -50pxとしたかった
}

いけなかった

github.com

なんかこういう扱いはダメっぽくて、calc()を使えということだった

マイナス値で出力するにはこう

:root {--block-position-top: 50px;}

.block {
  top: calc(-1 * var(--block-position-top));
}

なるほどcalc()で-1をかけてやれば確かに…。

正直なところ「これ正気か?」という気持ちがあるけどまだまだ策定中の技術なので仕方なさそう。

とはいえCSS Variables使ってみると結構便利なのでそこまで嫌いではない。