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变量，或者还有其他我缺少的东西？

Answer 1

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

但是在您这一边，您可以检查一些事情来调试这种情况：

您确定两个变量始终都已定义。如果不是，则所有变换值都会受到影响。
值的属性是否存在循环，您无法在值中使用自身定义变量，例如--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

css：transform + 2 css变量

1 个答案: