Цветовые функции Sass

Sass 函数Функции Sass

Цветовые функции Sass можно разделить на три части: настройки цвета, получение цвета и операции с цветом.

В таблице ниже перечислены цветовые функции Sass:

Настройки цвета Sass

Функция Описание и примеры
rgb(red, green, blue) Создайте красно-зелёно-синий (RGB) цвет. R означает "красный", G — "зелёный", а B — "синий".

Пример:
rgb(0, 0, 255);
rgba(red, green, blue, alpha) Создайте цвет из значений красного, зелёного, синего и альфа.

Пример:
rgba(0, 0, 255, 0.3);
hsl(hue, saturation, lightness) Создайте цвет из значений оттенка, насыщенности и светлоты.

Пример:
hsl(120, 100%, 50%); // зелёный
hsl(120, 100%, 75%); // светло-зелёный
hsl(120, 100%, 25%); // тёмно-зелёный
hsl(120, 60%, 70%); // нежно-зелёный
hsla(hue, saturation, lightness, alpha) Создайте цвет из значений оттенка, насыщенности, светлоты и альфа.

Пример:
hsl(120, 100%, 50%, 0.3); // зелёный с прозрачностью
hsl(120, 100%, 75%, 0.3); // светло-зелёный с прозрачностью
grayscale(color) Преобразует цвет в серый, эквивалентно desaturate( color,100%).

Пример:
grayscale(#7FBFFF);
Результат: #c6c6c6
complement(color) Возвращает комплементарный цвет, эквивалентно adjust-hue($color,180deg).

Пример:
complement(#7FBFFF);
Результат: #ff7faa
invert(color, weight) Возвращает инвертированный цвет, в котором значения красного, зелёного и синего инвертированы, а значение альфа остаётся без изменений.

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

Получение цвета в Sass

Функция Описание и примеры
red(color) Получить значение красного (0-255) из цвета.

Пример:
red(#7FBFFF);
Результат: 127
red(red);
Результат: 255
green(color) Получить значение зеленого (0-255) из цвета.

Пример:
green(#7FBFFF);
Результат: 255
green(blue);
Результат: 0
blue(color) Получить значение синего (0-255) из цвета.

Пример:
blue(#7FBFFF);
Результат: 212
blue(blue);
Результат: 255
hue(color) Возвращает угол оттенка цвета в цветовом пространстве HSL (0deg - 255deg).

Пример:
hue(#7FBFFF);
Результат: 160deg
saturation(color) Получить значение насыщенности (0% - 100%) цвета.

Пример:
saturation(#7FBFFF);
Результат: 100%
lightness(color) Получить значение lightness (0% - 100%) цвета.

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

Пример:
alpha(#7FBFFF);
Результат: 1
opacity(color) Получить значение alpha (прозрачности) (0-1) цвета.

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

Операции с цветом в Sass

Функция Описание и примеры
mix(color1, color2, weight) Смешайте два цвета.weightПараметр weight должен быть в диапазоне от 0% до 100%. Значение weight по умолчанию — 50%, то есть новый цвет на 50% состоит из color1 и на 50% из color2. Если weight равен 25%, это значит, что новый цвет состоит на 25% из color1 и на 75% из color2.
adjust-hue(color, degrees) Создайте новый цвет, изменив значение hue цвета (-360deg - 360deg).

Пример:
adjust-hue(#7FBFFF, 80deg);
Результат: #8080ff
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha) Эта функция может настраивать одно или несколько значений атрибутов заданного цвета, включая различные параметры значений цвета для RGB- и HSL-цветов, а также значение альфа-канала. Эти настройки зависят от переданных именованных параметров, которые добавляются к соответствующим значениям цвета заданного цвета или вычитаются из них.

Пример:
adjust-color(#7FBFFF, blue: 25);
Результат:
change-color(color, red, green, blue, hue, saturation, lightness, alpha) Аналогично adjust-color выше, за исключением того, что параметры, переданные этой функции, напрямую заменяют исходные значения без каких-либо арифметических операций.

Пример:
change-color(#7FBFFF, red: 255);
Результат: #ffffd4
scale-color(color, red, green, blue,  saturation, lightness, alpha) Ещё одна практичная функция настройки цвета. adjust-color просто прибавляет к собственным параметрам значения цвета или вычитает из них переданные аргументы, что иногда может приводить к переполнению накопленных значений; конечно, функция удерживает результат в допустимых пределах. Функция scale-color избегает этой ситуации, позволяя эффективно настраивать параметры в допустимых пределах, не беспокоясь о переполнении.

Например, значение светлоты цвета находится между 0% и 100%. Если выполнить scale-color($color, $lightness: 40%), это означает, что светлота цвета увеличится на (100 - исходное значение) × 40%.

Другой пример: выполнение scale-color($color, $lightness: -40%) означает, что светлота цвета уменьшится на (исходное значение - 0) × 40%.

Все значения параметров должны находиться между 0% и 100%, а параметры RGB и HSL не могут конфликтовать.

scale-color(hsl(120, 70%, 80%), $lightness: 50%) => hsl(120, 70%, 90%)
scale-color(rgb(200, 150, 170), $green: -40%, $blue: 70%) => rgb(200, 90, 229)
scale-color(hsl(200, 70%, 80%), $saturation: -90%, $alpha: -30%) => hsla(200, 7%, 80%, 0.7)
rgba(color, alpha) Создайте цвет из значений красного, зелёного, синего и альфа.

Пример:
rgba(#7FBFFF, 30%);
Результат: rgba(127, 191, 255, 0.3)
lighten(color, amount) Создайте новый цвет, увеличив значение светлоты (0% - 100%) цвета, чтобы сделать его светлее.
darken(color, amount) Создайте новый цвет, уменьшив значение светлоты (0% - 100%) цвета, чтобы сделать его темнее.
saturate(color, amount) Увеличьте насыщенность заданного цвета. Эквивалентно adjust-color( color, saturation: amount)
desaturate(color, amount) Уменьшите насыщенность цвета, чтобы получить новое значение цвета. Опять же, диапазон значений насыщенности составляет 0% ~ 100%. Эквивалентно adjust-color(color, saturation: -amount)
opacify(color, amount) Уменьшите прозрачность цвета, со значениями в диапазоне 0-1. Эквивалентно adjust-color(color, alpha: amount)
fade-in(color, amount) Уменьшите прозрачность цвета, со значениями в диапазоне 0-1. Эквивалентно adjust-color(color, alpha: amount)
transparentize(color, amount) Увеличивает прозрачность цвета, со значениями между 0-1. Эквивалентно adjust-color(color, alpha: -amount)
fade-out(color, amount) Увеличивает прозрачность цвета, со значениями между 0-1. Эквивалентно adjust-color(color, alpha: -amount)

Sass 函数Функции Sass

Другие расширения