css - css: 変換 + 2 つの css 変数

Question

一連の要素に次の css があります。

#foo-parent {
    --rotation: 45deg;
}

@media (max-width: 1680px) {
    .foo {
      --multiplier: 8.33;
    }
}

/* a number of other nearly identical media queries defining different values for --multiplier */

.foo {
    transform: scale(calc(var(--multiplier) / 25)) rotate(calc(0deg - var(--rotation)))!important;
}

回転変換は正常に機能していますが、スケーリングが開始されていません。

transform: scale(.222) rotate(calc(0deg - var(--rotation)))!important;

...できます。

編集：さらなるテストから、どちらか半分を取り出すと、それぞれが別々に機能します：

transform: scale(calc(var(--multiplier) / 25))!important;
transform: rotate(calc(0deg - var(--rotation)))!important;

両方の css 変数ビットが存在する場合にのみ失敗します。

transform: scale(calc(var(--multiplier) / 25)) rotate(calc(0deg - var(--rotation)))!important;

それで、css変数しか使用できないという制限はありますか、それとも他に何か不足していますか?