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, blue, saturation, 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 зменшує альфа-канал на цю величину. |
