css：变换 + 2 个 css 变量答案

【问题标题】：css: transform + 2 css variablescss：变换 + 2 个 css 变量
【发布时间】：2016-09-24 00:57:22
【问题描述】：

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

【问题讨论】：

分别测试它们对我不起作用。请提供一个带有 html 标记的小提琴。
好吧，当它被抽象出来时，它在小提琴中工作；我将不得不四处玩耍，看看还有什么可能导致事情失败。无论如何：jsfiddle.net/hq24yt9w
对我来说，它是双向的，分开的和不分开的。您使用的是什么浏览器（和版本）？
设法找到了问题。当 #foo-parent 让类为 --rotation 赋予 45deg 的值时，转换起作用了。但是，我忽略了为 --rotation 赋予父级的默认值 0deg，因此，当 45deg 类未打开时，（空）旋转似乎正在工作，但实际上是(0deg - undefined)，使整个变换无效，包括一半的比例。

标签： css css-variables

【解决方案1】：

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

但在你这边，你可以检查几件事来调试这个案例：

你确定这两个变量总是被定义的吗？如果不是，所有的变换值都会受到影响。
值的归属是否存在循环，不能在值中使用自身定义变量，e.i. --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

【讨论】：