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, или я пропускаю что-то еще?

Answer 1

Здесь немного сложно помочь вам с недостающими частями кода, потому что с этим первым представлением все должно работать.

Но, с вашей стороны, вы можете проверить несколько вещей, чтобы отладить этот случай:

• Вы уверены, что две переменные всегда определены? В противном случае это повлияет на все значение преобразования.
• Есть ли цикл в присвоении значения, вы не можете определить переменную, используя себя в значении, ei --size: calc(var(--size) + 50px);
• Проверьте, не станет ли в какой-то момент недействительным значение. Это не должно произойти легко, потому что почти все значения действительны, но способ их использования может вызвать ошибку нового типа.invalid at computed timeэто означает, что значение вычисляемой переменной не имеет смысла в этом конкретном контексте. (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)

Надеюсь, этот небольшой список поможет:)

PS. в некоторых случаях вы можете использовать резервный вариант: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties