Пару дней назад в черновик спецификации #css_values_4 добавили функцию
Условно "взять промежуточный цвет между синим и красным, на 20% ближе к синему, чем к красному" будет выглядеть как
Думаю, это будет удобно для остановок в промежуточных точках анимации.
Также, mix() не будет работать для неаминируемых свойств. Это удобно для реализации в браузерах, но как фунция будет вести себя с переменными, пока что не понятно.
Интересно, что в качестве разделителей аргументов использованы точки с запятыми. Это необычно. Причина: сами интерполиемые значения могут содержать в себе запятые, например какие-то сложные фоны.
Решение не конечное, есть предложения сделать вложенные функции
Так же пока не ясно запретят ли инперполирование вне указанного диапазона с помощью отрицательного первого аргумента или больше 100%.
P.S. В твиттер мне справедливо напомнили, что:
"Не будет лишним напомнить, что всё то же самое можно сделать с помощью JS, установив вебпак и скачав всего лишь несколько библиотек с npmjs"
Спецификация туть.
mix()
для интерполяции значения между двумя заданными./*
* @param {<percentage>} --percentage Точка интерполяции
* @param { <any> } --start-value Начальное значение
* @param { <any> } --end-value Конечное значение
*/
mix( var(percentage) ; var(--start-value) ; var(--end-value) );
Условно "взять промежуточный цвет между синим и красным, на 20% ближе к синему, чем к красному" будет выглядеть как
mix(20%, blue, red);
Думаю, это будет удобно для остановок в промежуточных точках анимации.
Также, mix() не будет работать для неаминируемых свойств. Это удобно для реализации в браузерах, но как фунция будет вести себя с переменными, пока что не понятно.
Интересно, что в качестве разделителей аргументов использованы точки с запятыми. Это необычно. Причина: сами интерполиемые значения могут содержать в себе запятые, например какие-то сложные фоны.
Решение не конечное, есть предложения сделать вложенные функции
mix(<percentage> from(<value>) to(<value>))
или даже дополнительные скобки mix(<percentage> , (<start-value>), (<end-value>))
, в общем скорее всего это так не останется.Так же пока не ясно запретят ли инперполирование вне указанного диапазона с помощью отрицательного первого аргумента или больше 100%.
P.S. В твиттер мне справедливо напомнили, что:
"Не будет лишним напомнить, что всё то же самое можно сделать с помощью JS, установив вебпак и скачав всего лишь несколько библиотек с npmjs"
Спецификация туть.