CSSのカスタムプロパティで「10px」と定義したものを、「-10px」と指定したい

Question

###前提・実現したいこと

次のようにrootを定義しています。これをマイナスの値で-10pxと指定したいです。

:root {
    --height: 10px;
}

###発生している問題
マイナスの値で指定する方法がわかりません。

###該当のソースコード
次のようにマイナスの値で指定し、-10pxとしたいです。

:root {
    --height: 10px;
}
.element {
    position: absolute;
    top: - var(--height); /* -10pxとしたい */
}

###試したこと
calcを使ってみたらどうかと思い次の2通りを試したのですがうまくいきませんでした。

:root {
    --height: 10px;
}
.element {
    position: absolute;
    top: calc(0 - var(--height));
}

:root {
    --height: 10px;
}
.element {
    position: absolute;
    top: calc(0 - #{var(--height)});
}

calcで単位があるのがマズイのかと思い、次のようにroot側からpxをとってみたのですがこれもできませんでした。

:root {
    --height2: 10; /* pxをとってみた */
}
.element {
    position: absolute;
    top: calc(0 - var(--height2)) px; /* ここでpxをつけてみた */
}

###備考
SCSS等でなく通常のCSSで知りたいです。

またroot側ですが、できればpx指定のままにして数値だけの指定というのは避けたいです。（今まで無思慮にそうしてきたというだけの理由からですが、px指定はない方が便利だったりしますか？もしそうであれば数値だけの指定に変更することも考えています。）

どうぞ宜しくお願い致します。

Answer 1

calc()を使用するといかがでしょうか?

.element {
    position: absolute;
    top: calc(-1 * var(--height));
}

Comments

[teratails]

「-1 *」発想できませんでした。ありがとうございます。