color
Категория функций для работы с цветом.
hex-to-hsl
Преобразует HEX-значение цвета в HSL.
Параметры:
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| $hex * | color | — | HEX-значение цвета. |
| $separator | string | comma | Разделитель, который будет использован в полученном списке space | comma | slash | auto |
Возвращаемое значение:
list - Список значений в формате HSL (hue, saturation, lightness).
Пример использования:
@use 'more-sass' as more;
@debug more.hex-to-hsl(#ff0000); // list: 0deg, 100%, 50%
hex-to-rgb
Преобразует HEX-значение цвета в RGB.
Параметры:
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| $hex * | color | — | HEX-значение цвета. |
| $separator | string | comma | Разделитель, который будет использован в полученном списке space | comma | slash | auto |
Возвращаемое значение:
list - Список значений в формате RGB (red, green, blue).
Пример использования:
@use 'more-sass' as more;
@debug more.hex-to-rgb(#ff0000); // list: 255, 0, 0
shade
Затемняет переданный цвет, смешивая его с чёрным.
Параметры:
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| $color * | color | — | Оригинальный цвет. |
| $amount | number | 10 | Доля чёрного цвета в получившемся цвете (%). |
Возвращаемое значение:
color - Цвет, полученный в результате смешения оригинального цвета с чёрным.
Пример использования:
@use 'more-sass' as more;
@debug more.shade(#808080, 45); // color: #464646
social-color
Получает фирменный цвет определённой социальной сети.
Параметры:
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| $social * | string | — | Код требуемого ресурса ('vk', 'fb', 'tw', etc.). |
Возвращаемое значение:
?color - Фирменный цвет требуемой социальной сети.
Пример использования:
@use 'more-sass' as more;
@debug more.social-color('vk'); // color: #4a76a8
Список доступных кодов:
vk- ВКонтактеfb- Facebookok- Однокласникиyt- YouTubetw- Twitterig- Instagram (purple)ig-gradient- Instagram (gradient)tg- Telegramdr- Dribblebe- Behanceli- Linked Inwa- WhatsAppvb- Viber
tint
Осветляет переданный цвет, смешивая его с белым.
Параметры:
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| $color * | color | — | Оригинальный цвет. |
| $amount | number | 10 | Доля белого цвета в получившемся цвете (%). |
Возвращаемое значение:
color - Цвет, полученный в результате смешения оригинального цвета с белым.
Пример использования:
@use 'more-sass' as more;
@debug more.tint(#808080, 45); // color: #b9b9b9