Допустим имеется цвет #ff7fa1, как средствами scss
Увеличить его сочность до максимального уровня #ff0044?
Уменьшить его сочность до минимального уровня #ffffff?
Ответ
Можно обратиться к цветовой схемеhsl
При этом максимальная сочность цвета будет при значении 50% для l компоненты и минимальная (белый цвет) - при значении 100%.
В SASS есть функция получения l компоненты: lightness($color)
А также функции для изменения этой компоненты:
lighten($color, $amount)
darken($color, $amount)
Таким образом для решения пункта два, нужно дополнить значение компоненты до 100, а для решения первого пункта в случае если текущее значение больше 50 - уменьшить, в противном случае - увеличить до 50.
Пример использования:
.c1{
color: lighten($color, 100-(lightness($color)));
}
.c2{
$l : lightness($color);
color: if($l > 50, darken($color, ($l)-50), lighten($color, 50-($l)));
}
При $color: #ff7fa1 преобразуется в следующее:
.c1 {
color: white;
}
.c2 {
color: #ff0044;
}
используется функция if
Комментариев нет:
Отправить комментарий