SCSS Color Functions

SCSS предоставляет множество встроенных функций для манипулирования цветами. Эти функции позволяют осветлять, затемнять, насыщать, обесцвечивать, смешивать цвета и выполнять другие полезные преобразования прямо в вашем SCSS коде.

Основные Функции

lighten()

Осветляет цвет на заданный процент.

Синтаксис:

lighten($color, $amount)

• $color: Цвет, который нужно осветлить.
• $amount: Процент осветления (от 0% до 100%).

Пример:

$base-color: #336699;
$light-color: lighten($base-color, 20%); // Результат: #80a3cc

darken()

Затемняет цвет на заданный процент.

Синтаксис:

darken($color, $amount)

• $color: Цвет, который нужно затемнить.
• $amount: Процент затемнения (от 0% до 100%).

Пример:

$base-color: #336699;
$dark-color: darken($base-color, 20%); // Результат: #003366

saturate()

Увеличивает насыщенность цвета на заданный процент.

Синтаксис:

saturate($color, $amount)

• $color: Цвет, насыщенность которого нужно увеличить.
• $amount: Процент увеличения насыщенности (от 0% до 100%).

Пример:

$muted-color: #808080;
$saturated-color: saturate($muted-color, 50%); // Результат: #bfbfbf (зависит от исходного оттенка)

desaturate()

Уменьшает насыщенность цвета на заданный процент.

Синтаксис:

desaturate($color, $amount)

• $color: Цвет, насыщенность которого нужно уменьшить.
• $amount: Процент уменьшения насыщенности (от 0% до 100%).

Пример:

$vibrant-color: #00ff00;
$desaturated-color: desaturate($vibrant-color, 50%); // Результат: #80ff80

grayscale()

Полностью обесцвечивает цвет, делая его оттенком серого.

Синтаксис:

grayscale($color)

• $color: Цвет, который нужно обесцветить.

Пример:

$colorful: #ff00ff;
$gray: grayscale($colorful); // Результат: #808080

invert()

Инвертирует цвет.

Синтаксис:

invert($color)

• $color: Цвет, который нужно инвертировать.

Пример:

$black: #000000;
$white: invert($black); // Результат: #ffffff

opacify() (fade-in())

Делает цвет более непрозрачным (увеличивает альфа-канал).

Синтаксис:

opacify($color, $amount)
fade-in($color, $amount) // Псевдоним `opacify()`

• $color: Цвет, прозрачность которого нужно уменьшить.
• $amount: Значение увеличения прозрачности (от 0 до 1).

Пример:

$transparent-red: rgba(255, 0, 0, 0.5);
$opaque-red: opacify($transparent-red, 0.3); // Результат: rgba(255, 0, 0, 0.8)

transparentize() (fade-out())`

Делает цвет более прозрачным (уменьшает альфа-канал).

Синтаксис:

transparentize($color, $amount)
fade-out($color, $amount) // Псевдоним `transparentize()`

• $color: Цвет, прозрачность которого нужно увеличить.
• $amount: Значение уменьшения прозрачности (от 0 до 1).

Пример:

$solid-blue: rgba(0, 0, 255, 1);
$faded-blue: transparentize($solid-blue, 0.7); // Результат: rgba(0, 0, 255, 0.3)

mix()

Смешивает два цвета вместе на заданный процент.

Синтаксис:

mix($color1, $color2, [$weight])

• $color1: Первый цвет.
• $color2: Второй цвет.
• $weight: Необязательный процент смешивания первого цвета (от 0% до 100%). По умолчанию 50%`.

Пример:

$red: #ff0000;
$blue: #0000ff;
$mixed-color: mix($red, $blue, 30%); // 30% красного, 70% синего

Функции для работы с Hue, Saturation и Lightness (HSL)

SCSS также предоставляет функции для непосредственного управления HSL (Hue, Saturation, Lightness) значениями цвета.

hue()

Возвращает значение оттенка (hue) цвета в градусах (от 0deg до 360deg).

Синтаксис:

hue($color)

Пример:

$green: #00ff00;
$hue-value: hue($green); // Результат: 120deg

saturation()

Возвращает значение насыщенности (saturation) цвета в процентах (от 0% до 100%).

Синтаксис:

saturation($color)

Пример:

$pale-blue: #add8e6;
$saturation-value: saturation($pale-blue); // Результат: 53.3333333333%

lightness()

Возвращает значение светлоты (lightness) цвета в процентах (от 0% до 100%).

Синтаксис:

lightness($color)

Пример:

$dark-gray: #333333;
$lightness-value: lightness($dark-gray); // Результат: 20%

adjust-hue()

Изменяет оттенок цвета на заданное количество градусов.

Синтаксис:

adjust-hue($color, $degrees)

• $color: Цвет, оттенок которого нужно изменить.
• $degrees: Количество градусов для изменения оттенка (может быть положительным или отрицательным).

Пример:

$red: #ff0000;
$orange: adjust-hue($red, 30deg); // Результат: #ff8000

scale-color()

Плавно масштабирует один или несколько каналов цвета.

Синтаксис:

scale-color($color, [$saturation], [$lightness], [$brightness], [$opacity])

• $color: Цвет для масштабирования.
• $saturation: Процент изменения насыщенности (от -100% до 100%).
• $lightness: Процент изменения светлоты (от -100% до 100%).
• $brightness: Процент изменения яркости (от -100% до 100%).
• $opacity: Процент изменения прозрачности (от -100% до 100%).

Пример:

$pastel-blue: #a7d1eb;
$darker-pastel: scale-color($pastel-blue, $lightness: -20%, $saturation: 10%);

change-color()

Изменяет один или несколько каналов цвета напрямую.

Синтаксис:

change-color($color, [$hue], [$saturation], [$lightness], [$red], [$green], [$blue], [$alpha])

• $color: Цвет для изменения.
• $hue, $saturation, $lightness: Новые HSL значения.
• $red, $green, $blue: Новые RGB значения.
• $alpha: Новое значение прозрачности (от 0 до 1).

Пример:

$sky-blue: #87ceeb;
$sea-green: change-color($sky-blue, $hue: 150deg, $saturation: 50%);

Функции для работы с RGB и Alpha

SCSS также предоставляет функции для работы с RGB (Red, Green, Blue) и альфа-каналом (прозрачностью).

rgb()

Создает цвет из красного, зеленого и синего значений.

Синтаксис:

rgb($red, $green, $blue)

• $red, $green, $blue: Целые числа от 0 до 255.

Пример:

$custom-red: rgb(255, 102, 0); // Ярко-оранжевый

rgba()

Создает цвет из красного, зеленого, синего и альфа-значений.

Синтаксис:

rgba($red, $green, $blue, $alpha)

• $red, $green, $blue: Целые числа от 0 до 255.
• $alpha: Число от 0 (полностью прозрачный) до 1 (полностью непрозрачный).

Пример:

$semi-transparent-blue: rgba(0, 0, 255, 0.5);

red(), green(), blue()

Возвращают соответствующее RGB значение цвета (от 0 до 255).

Синтаксис:

red($color)
green($color)
blue($color)

Пример:

$purple: #800080;
$red-value: red($purple);   // Результат: 128
$green-value: green($purple); // Результат: 0
$blue-value: blue($purple);  // Результат: 128

alpha() (opacity())

Возвращает альфа-значение (прозрачность) цвета (от 0 до 1).

Синтаксис:

alpha($color)
opacity($color) // Псевдоним `alpha()`

Пример:

$semi-transparent-green: rgba(0, 255, 0, 0.7);
$alpha-value: alpha($semi-transparent-green); // Результат: 0.7

Заключение

Функции работы с цветом в SCSS предоставляют мощные инструменты для динамического создания и манипулирования цветами в ваших стилях. Используя эти функции, вы можете создавать более гибкие, тематизированные и легко поддерживаемые цветовые схемы.