Как указать var() в качестве значения одного из параметров (initial-value) @property для другого var()

Question

Как указать var() в качестве значения одного из параметров (initial-value) @property для другого var()

Рейтинг: 3Ответов: 1Опубликовано: 26.01.2023

Сидел значит, тренировался в css с новыми фишками. И уткнулся в проблему! Есть у меня 2 переменные:

--number: 0;
--time: 30;

Так вот для --time нужно задать пропсы

@property --number {
  syntax: "<integer>";
  inherits: false;
  initial-value: var(--time);
}

Вот только не задача, если initial-value установить статически, те же 30 например, то все работает как надо, но если вместо числа задать переменную, то тут уже не работает. Пробовал костыль типа calc(var(--time) * 1), но нет, это так же не работает. Как и почему?! Есть идеи?

css css3 переменные css-variables

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

Начнём с самого начала, что такое initial-value?

Из MDN:

The initial-value CSS descriptor is required when using the @property at-rule unless the syntax accepts any valid token stream. It sets the initial-value for the property.

The value chosen as the initial-value must parse correctly according to the syntax definition. Therefore, if syntax is <color> then the initial-value must be a valid color value.

Перевод:

initial-value это CSS дескриптор, который требуется при использовании @property at-rule, только если синтаксис допусткает любой валидный (правильный) поток токенов. Оно назначает начальное значение для свойства.

Значение выбранное для initial-value должно быть пропарсено в соответствии с определением синтаксиса. То есть, если синтаксис - <color>, значит начальное значение должно быть валидным (правильным) color (цветовым) значением.

То есть, если допустим мы введём <integer> для синтаксиса, то тогда initial-value должно быть типа <integer> (Пример: 10, 42 и т.п.), соответственно оно не может быть 42px, #c0ffee, 'foo' или чем то, что не целое число. Согласны? Продолжаем.

Теперь, что такое var()?

Из MDN:

Функция CSS var() используется для вставки значения кастомного свойства (также известного как "CSS-переменная") в другое свойство.

Как мы видим в представленном примере из MDN, синтаксис (тип) у функции var(), это <var()>:

<var()> = 
  var( <custom-property-name> , <declaration-value> )

Уже догадались? То есть, сама по себе функция var() имеет тип <var()>, соответственно, если в initial-value передать var(...), то сам initial-value будет типа <var()>, а как мы помним, если тип inital-value не совпадает с syntax, значит оператор @property не корректный. Бинго! Мы поняли в чём проблема :)

Теперь когда мы поняли что нужно вводить, пишем соответствующий код:

@property --number {
  syntax: "<var()>";
  inherits: false;
  initial-value: var(--time);
}

Но так как <var()> может быть чем угодно, это лишает смысла весь код.

Материал по теме:

Как указать var() в качестве значения одного из параметров (initial-value) @property для другого var()

Ответы