如何计算css自定义变量？计算（百分比 * 百分比）

Question

我试图计算一些 css variables。但我对 calc(percentage * percentage) 有疑问。 百分比乘以百分比似乎有问题。

  --test: 30%;
  --test2: 50%;
  background: hsl(
    10deg,
    40%,
    calc( 50% * var(--test) / var(test2) ) // doesn't work
  );

background: hsl(
    10deg,
    40%,
    calc( 50% * 1 ) // works
  );

  background: hsl(
    10deg,
    40%,
    calc( 50% * 100% ) // doesn't work
  );

  background: hsl(
    10deg,
    40%,
    calc( 50% * (100% / 100%) ) // doesn't work too
  );

任何人都可以解决混合单元的问题？我无法避免在我的 css var 中使用 %。