НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
Sass. W3Schools українською. Уроки для початківців

En

Sass Функції кольору


Sass Функції кольору

Ми розділили функції кольору в Sass на три частини: функції встановлення кольору, функції отримання кольору та функції керування кольором:

Функції встановлення кольору

Функція Опис & Приклад
rgb(red, green, blue) Встановлює колір за допомогою моделі червоно-зелено-синій (RGB). Значення кольору RGB визначається за допомогою: rgb(red, green, blue). Кожен параметр визначає інтенсивність цього кольору та може бути цілим числом від 0 до 255 або відсотковим значенням (від 0% до 100%).

Приклад:
rgb (0, 0, 255); // відображається як синій, тому що синій параметр встановлено на найвище значення (255), а інші встановлені на 0
rgba(red, green, blue, alpha) Встановлює колір за допомогою моделі червоний-зелений-синій-альфа (RGBA). Значення кольорів RGBA є розширенням значень кольорів RGB з альфа-каналом, який визначає непрозорість кольору. Альфа-параметр — це число від 0,0 (повністю прозорий) до 1,0 (повністю непрозорий).

Приклад:
rgba(0, 0, 255, 0,3); // відображається синім кольором із непрозорістю
hsl(hue, saturation, lightness) Встановлює колір за допомогою моделі Hue-Saturation-Lightness (HSL) і представляє подання кольорів у циліндричних координатах. Відтінок — це градус на колірному колі (від 0 до 360) — 0 або 360 — червоний, 120 — зелений, 240 — синій. Насиченість – значення у відсотках; 0% означає відтінок сірого, а 100% – повний колір. Легкість теж у відсотках; 0% — чорний, 100% — білий.

Приклад:
hsl(120, 100%, 50%); // зелений
hsl(120, 100%, 75%); // світло-зелений
hsl(120, 100%, 25%); // темно-зелений
hsl(120, 60%, 70%); // пастельно-зелений
hsla(hue, saturation, lightness, alpha) Встановлює колір за допомогою моделі Hue-Saturation-Lightness-Alpha (HSLA). Значення кольорів HSLA є розширенням значень кольорів HSL з альфа-каналом, який визначає непрозорість кольору. Альфа-параметр — це число від 0,0 (повністю прозорий) до 1,0 (повністю непрозорий).

Приклад:
hsl(120, 100%, 50%, 0,3); // зелений з непрозорістю
hsl(120, 100%, 75%, 0.3); // світло-зелений з непрозорістю
grayscale(color) Встановлює сірий колір такої самої яскравості, як колір.

Приклад:
grayscale(#7fffd4);
Результат: #c6c6c6
complement(color) Встановлює колір, який є додатковим до color.

Приклад:
complement(#7fffd4);
Результат: #ff7faa
invert(color, weight) Встановлює колір, який є зворотним або негативним кольором color. Параметр weight необов’язковий і має бути числом від 0% до 100%. За замовчуванням 100%.

Приклад:
invert(white);
Результат: black

Sass Отримати функції кольору

Функції Опис & Приклад
red(color) Повертає червоне значення кольору як число від 0 до 255.

Приклад:
red(#7fffd4);
Результат: 127
red(red);
Результат: 255
green(color) Повертає зелене значення кольору як число від 0 до 255.

Приклад:
green(#7fffd4);
Результат: 255
green(blue);
Результат: 0
blue(color) Повертає синє значення кольору як число від 0 до 255.

Приклад:
blue(#7fffd4);
Результат: 212
blue(blue);
Результат: 255
hue(color) Повертає відтінок кольору як число від 0 до 360 градусів.

Приклад:
hue(#7fffd4);
Результат: 160deg
saturation(color) Повертає насиченість HSL кольору як число від 0% до 100%.

Приклад:
saturation(#7fffd4);
Результат: 100%
lightness(color) Повертає яскравість HSL кольору як число від 0% до 100%.

Приклад:
lightness(#7fffd4);
Результат: 74.9%
alpha(color) Повертає альфа-канал коліру як число від 0 до 1.

Приклад:
alpha(#7fffd4);
Результат: 1
opacity(color) Повертає альфа-канал кольору як число від 0 до 1.

Приклад:
opacity(rgba(127, 255, 212, 0.5));
Результат: 0.5

Sass Керування функціями кольору

Функція Опис & Приклад
mix(color1, color2, weight) Створює колір, який є сумішшю color1 і color2. Параметр weight має бути від 0% до 100%. Більша вага означає, що слід використовувати більше color1. Менша вага означає, що слід використовувати більше color2. За замовчуванням 50%.
adjust-hue(color, degrees) Регулює відтінок кольору в межах від -360 до 360 градусів.

Приклад:
adjust-hue(#7fffd4, 80deg);
Результат: #8080ff
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha) Коригує один або декілька параметрів на вказану величину. Ця функція додає або віднімає вказану кількість до/від існуючого значення кольору.

Приклад:
adjust-color(#7fffd4, blue: 25);
Результат:
change-color(color, red, green, blue, hue, saturation, lightness, alpha) Встановлює нові значення для одного або кількох параметрів кольору.

Приклад:
change-color(#7fffd4, red: 255);
Результат: #ffffd4
scale-color(color, red, green, bluesaturation, lightness, alpha) Масштабує один або більше параметрів кольору.
rgba(color, alpha) Створює новий колір color із заданим альфа-каналом.

Приклад:
rgba(#7fffd4, 30%);
Результат: rgba(127, 255, 212, 0.3)
lighten(color, amount) Створює світліший колір color із amount від 0% до 100%. Параметр amount збільшує світлоту HSL на цей відсоток.
darken(color, amount) Створює темніший колір color із amount від 0% до 100%. Параметр amount зменшує світлоту HSL на цей відсоток.
saturate(color, amount) Створює більш насичений колір color із amount від 0% до 100%. Параметр amount збільшує насиченість HSL на цей відсоток.
desaturate(color, amount) Створює менш насичений колір color із amount від 0% до 100%. Параметр amount зменшує насиченість HSL на цей відсоток.
opacify(color, amount) Створює більш непрозорий колір color із значенням amount від 0 до 1. Параметр amount збільшує альфа-канал на цю величину.
fade-in(color, amount) Створює більш непрозорий колір color із значенням amount від 0 до 1. Параметр amount збільшує альфа-канал на цю величину.
transparentize(color, amount) Створює більш прозорий колір color із значенням amount від 0 до 1. Параметр amount зменшує альфа-канал на цю величину.
fade-out(color, amount) Створює більш прозорий колір color із значенням amount від 0 до 1. Параметр amount зменшує альфа-канал на цю величину.