Sass Цветовые функции
Sass Цветовые функции
Мы разделили цветовые функции в Sass на три части: функции установки цвета, функции получения цвета и функции управления цветом:
Sass Функции установки цвета
| Функция | Описание & Пример |
|---|---|
| rgb(red, green, blue) | Устанавливает цвет с использованием модели Красный-Зеленый-Синий (Red-Green-Blue - RGB). Значение цвета RGB задается с помощью: rgb(red, green, blue). Каждый параметр определяет интенсивность этого цвета и может быть целым числом от 0 до 255 или процентным значением (от 0% до 100%). Пример: rgb(0, 0, 255); // отображается как синий, потому что для синего параметра установлено максимальное значение (255), а для остальных установлено значение 0 |
| rgba(red, green, blue, alpha) | Устанавливает цвет с использованием модели Красный-Зеленый-Синий-Альфа (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) | Устанавливает серый цвет с такой же яркостью, как color. Пример: grayscale(#7fffd4); Результат: #c6c6c6 |
| complement(color) | Устанавливает цвет, который является дополнительным цветом color. Пример: complement(#7fffd4); Результат: #ff7faa |
| invert(color, weight) | Устанавливает цвет, который является инверсным или отрицательным цветом color. Параметр weight (толщина) является необязательным и должен быть числом от 0% до 100%. По умолчанию 100%. Пример: invert(white); Результат: black |
Sass Функции получения цвета
| Функция | Описание & Пример |
|---|---|
| red(color) | Возвращает значение красного color в виде числа между 0 и 255. Пример: red(#7fffd4); Результат: 127 red(red); Результат: 255 |
| green(color) | Возвращает значение зеленого цвета color в виде числа между 0 и 255. Пример: green(#7fffd4); Результат: 255 green(blue); Результат: 0 |
| blue(color) | Возвращает значение синего цвета color в виде числа между 0 и 255. Пример: blue(#7fffd4); Результат: 212 blue(blue); Результат: 255 |
| hue(color) | Возвращает оттенок color как число от 0 до 255 градусов. Пример: hue(#7fffd4); Результат: 160deg |
| saturation(color) | Возвращает насыщенность HSL для color как число от 0% до 100%. Пример: saturation(#7fffd4); Результат: 100% |
| lightness(color) | Возвращает яркость HSL color в виде числа от 0% до 100%. Пример: lightness(#7fffd4); Результат: 74.9% |
| alpha(color) | Возвращает альфа-канал color как число от 0 до 1. Пример: alpha(#7fffd4); Результат: 1 |
| opacity(color) | Возвращает альфа-канал 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) | Регулирует оттенок color в диапазоне от -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) | Устанавливает для одного или нескольких параметров color новые значения. Пример: change-color(#7fffd4, red: 255); Результат: #ffffd4 |
| scale-color(color, red, green, blue, saturation, lightness, alpha) | Масштабирует один или несколько параметров color. |
| rgba(color, alpha) | Создает новый цвет color с заданным alpha каналом. Пример: 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%. Параметр количества уменьшает яркость HSL на этот процент. |
| saturate(color, amount) | Создает более насыщенный цвет color с amount от 0% до 100%. Параметр количества увеличивает насыщенность HSL на этот процент. |
| desaturate(color, amount) | Создает менее насыщенный цвет color с amount от 0% до 100%. Параметр количества уменьшает насыщенность 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 уменьшает альфа-канал на эту величину. |
