0

我在一系列元素上有以下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 变量的限制，还是我还缺少其他东西？

4

1 回答 1

0

在这里帮助您解决缺少的部分代码有点困难，因为使用第一个视图它应该可以工作。

但在你这边，你可以检查几件事来调试这种情况：

  • 你确定这两个变量总是被定义的。如果不是，所有的变换值都会受到影响。
  • 值的归属是否有循环，不能在值中使用自己定义变量，ei--size: calc(var(--size) + 50px);
  • 检查是否在某个时刻该值变得无效。它不应该轻易发生，因为几乎所有值都是有效的，但是它们的使用方式可能会触发一种新的错误invalid at computed time，这意味着计算变量的值在特定的上下文中没有意义。（https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#Validity_and_values）

我希望这个小清单可以提供帮助:)

PS。您可以在某些情况下使用后备：https ://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#Custom_property_fallback_values

于 2020-06-18T15:23:03.273 回答