Критическое изменение: Единицы цвета

Важно, чтобы реализация Sass hsl() соответствовала спецификации CSS, а другие функции Sass, которые работают с цветами, согласованы с hsl(). Одно примечательное место, в котором Sass исторически отличался от спецификации, - это способ, которым hsl() (и другие цветовые функции) обрабатывают единицы.

Для оттенка CSS допускает любые угловые единицы (deg, grad, rad или turn). Он также позволяет использовать безразмерное число, которое интерпретируется как deg. Исторически Sass допускал любые единицы измерения и интерпретировал их как deg. Это особенно проблематично, потому что это означало, что правильное выражение CSS hsl(0.5turn, 100%, 50%) будет разрешено Sass, но будет интерпретировано совершенно неверно.

Для яркости и насыщенности CSS допускает только единицы %. Даже безразмерные числа не допускаются (в отличие от оттенка). Исторически Sass допускал любые единицы измерения и интерпретировал их как %. Вы даже можете написать hsl(0, 100px, 50s), и Sass вернет цвет red.

Чтобы исправить эту проблему и привести Sass в соответствие со спецификацией CSS, мы вносим изменения в несколько этапов:

Фаза 1 permalinkФаза 1

Совместимость:

Dart Sass

since 1.32.0

LibSass

✗

Ruby Sass

✗

Для начала мы просто вводим предупреждения об устаревании для поведения, которое мы планируем изменить. В частности, Sass выдаст предупреждение об устаревании, если вы выполните одно из следующих действий:

• Передайте число с единицей измерения, отличной от deg, в качестве оттенка любой функции. Передача безразмерного числа по-прежнему разрешена.

• Передайте безразмерное число в качестве насыщенности или яркости любой функции.

• Передайте число с единицей измерения, отличной от %, в качестве насыщенности или яркости любой функции.

Из этих предупреждений первое является наиболее важным, с которым нужно работать немедленно, особенно если вы передаете число с единицей измерения grad, rad или turn. Этот случай изменит поведение на Этапе 2, что может изменить способ визуализации ваших таблиц стилей, если вы их не обновите.

Фаза 2 permalinkФаза 2

Совместимость:

Dart Sass

✗

LibSass

✗

Ruby Sass

✗

По крайней мере, через три месяца после запуска Фазы 1 мы изменим способ обработки угловых единиц для параметров оттенка в соответствии со спецификацией CSS. Это означает, что числа с единицами измерения grad, rad или turn будут преобразованы в deg: 0.5turn будут преобразованы в 180deg, 100grad будут преобразованы в 90deg и скоро.

Поскольку это изменение необходимо для сохранения совместимости с CSS, в соответствии с политикой совместимости Dart Sass оно будет сделано только с незначительным увеличением версии. Однако он как можно меньше меняет поведение, чтобы гарантировать, что Sass интерпретирует весь допустимый CSS в соответствии со спецификацией CSS. Все остальное устаревшее поведение останется в силе до фазы 3.

Фаза 3 permalinkФаза 3

Совместимость:

Dart Sass

✗

LibSass

✗

Ruby Sass

✗

Наконец, мы удалим все устаревшее поведение, заставив функции цвета выдавать ошибки, если им переданы какие-либо блоки, которые выдавали предупреждения об устаревании на этапе 1. Поскольку это критическое изменение, которое не является строго необходимым для совместимости с CSS, мы внесем его как часть Dart Sass 2.0.0 (выпуск которой у нас нет в ближайшее время).