• Заметки

    • Sass / scss управление цветом

    Меню

    Отредактировано: 24 Января 2023

    Краткий список функций для назначения цвета какому-либо элементу:

    • rgb(red, green, blue) — задание цвета путем указания значений в красном, зеленом и синем каналах.
    • rgba(red, green, blue, alpha) — красный, зеленый, синий каналы и альфа канал (канал прозрачности).
    • rgba(color, alpha) — красный, зеленый, и синий каналы можно указать с помощью hex.
    • red(color), green(color), blue(color) — красный, зеленый или синий каналы можно указывать отдельно.
    • hsl(hue, saturation, lightness) — цвет на основе оттенка, насыщенности и яркости.
    • hsla(hue, saturation, lightness, alpha) — цвет на основе оттенка, насыщенности, яркости с добавлением альфа-канала (канала прозрачности).
    • hue(color) — цвет на основе оттенка.
    • saturation(color) — цвет на основе насыщенности.
    • lightness(color) — цвет на основе яркости.
    • mix(color1, color2, [weight]) — cмешение цветов, где weight — пропорции смешивания.
    • complement(color) — комплементарный цвет.
    • invert(color) — инвертированный цвет.
    • grayscale(color) — цвет в оттенках серого.
    • darken(color, amount) — темнее на число amount.
    • lighten(color, amount) — светлее на число amount.
    • saturate(color, amount) — увеличение насыщенности на число amount.
    • desaturate(color, amount) — уменьшение насыщенности на число amount.
    • alpha(color), opacity(color) — степень прозрачности альфа-канала.
    • transparentize(color, amount), opacify(color, amount) — уровень прозрачности цвета.
    • shade(color,$amount) — смешивание цвета с черным.
    • tint(color,$amount) — смешивание цвета с белым.
    • adjust-hue(color, degrees)
      adjust-color(color, [red], [green], [blue], [hue], [saturation], [lightness], [alpha]) — регулировка параметров цвета
    • scale-color(color, [red], [green], [blue], [saturation], [lightness], [alpha]) — цвет на основе исходного цвета

    Подробнее цветовые функции sass/scss рассмотрены далее. Для удобства, примеры цветовых преобразований будут показаны на цвете заключенном в переменную $base-color, кое-где понадобиться вспомогательный цвет $add-color:

    $base-color: #edd05f;
$add-color: #3cb4aa;
    base-color
    add-color

    Цветовые фильтры

    Все фильтры работают по принципу, при котором sass / scss анализирует переменную с цветом, а затем вносит указанные корректировки. Многие корректировки можно указывать используя знак %, либо опуская этот знак, результат будет идентичным.

    Темнее и светлее

    • darken — темнее.
    • lighten — светлее.

    Эти два параметра регулируют яркость значений цвета HSL. Корректировки указываются значением от 0 до 100. 

    В случае если исходный цвет имеет максимальную / минимальную яркость, соответствующая функция не сработает.

    darken($base-color, 20)
lighten($base-color, 20)
    darken
    base-color
    lighten

    Насыщать и обесцвечивать

    • saturate — насыщать.
    • desaturate— обесцвечивать.

    Насыщение и обесцвечивание цвета, указанного в цветовой переменной. Корректировки указываются значением от 0 до 100. 

    В случае если исходный цвет имеет максимальную / минимальную насыщенность, соответствующая функция не сработает.

    saturate($base-color, 20%)
desaturate($base-color, 20%)
    saturate
    base-color
    desaturate

    Дополнение и инверсия

    Результат обоих функций вычисляется по цветовому кругу.

    • complement — преобразует исходный цвет на прямо противоположный (идентично adjust-hue($base-color, 180deg)).
    • invert — возвращает обратное или отрицательное по отношению к $base-color.
    complement($base-color)
invert($base-color)
    complement
    base-color
    invert

    Регулеровка цветового тона

    Adjust-hue — регулирует значение оттенка HSL. Для изменения требуется процентное либо градусное значение, или отсутствие единиц. В случае если указаны градусы, результат вычисляется с помощью цветового круга.

    adjust-hue($base-color, 45);
adjust-hue($base-color, 80deg);
adjust-hue($base-color, -80deg);
    base-color
    45
    80deg
    -80deg

    Градации серого

    Функция grayscale преобразует базовый цвет в соответствующий оттенок серого.

    grayscale($base-color);
    base-color
    grayscale

    Добавление / убавление альфа-прозрачности

    Есть  несколько способов сделать заданный цвет прозрачным: hsla, rgba, opacify, fade-out и transparentize. Все они выполняют одно и то же, но по-разному. Наиболее популярная функция — rgba.

    • rgba — возвращает цвет с заданными красными, зелеными, синими и альфа каналами. Каждый канал может быть указан как число без единиц измерения от 0 до 255 (включительно), либо в процентах между 0% и 100% (включительно). Альфа-канал может быть задан как число без единиц измерения от 0 до 1 (включительно) или как процент от 0% и 100% (включительно).
    • hsla — возвращает цвет с заданным оттенком, насыщенностью, яркостью и альфа-каналом. Оттенок — число между 0deg и 360deg (включительно). Насыщенность и яркость — числа между 0% и 100% (включительно). Цифры могут быть без единиц измерения. Альфа-канал может быть задан как число без единиц измерения от 0 до 1 (включительно) или как процент от 0% до 100% (включительно).
    • opacify / fade-in — делает заданный цвет менее прозрачным.
    • transparentize / fade-out — делает заданный цвет более прозрачным.
    rgba($base-color, .7)
hsla(34, 35%, 92%, 0.7);
opacify(rgba($base-color, 0.7), 0.3);
fade-in(rgba($base-color, 0.7), 0.3);
transparentize(rgba($base-color, 0.5), 0.2)
fade-out(rgba($base-color, 0.5), 0.2)

    Смешивание

    С помощью функции mix можно смешивать 2 определенных цвета в указанной пропорции.

    mix($base-color,$add-color,70);
    base-color
    mix
    add-color

    Сложные функции

    Adjust-color, scale-color и change-color относятся к числу сложных функций, которые могут влиять на одно или несколько свойств. У данных функций есть общие правила: 

    • Считается ошибкой указывать свойства RGB одновременно со свойствами HSL;
    • Все необязательные аргументы должны быть числами.

    adjust-color

    Увеличивает или уменьшает одно или несколько свойств $base-color на фиксированные величины. Полный синтаксис выглядит так:

    adjust-color($base-color,
  $red: null, $green: null, $blue: null,
  $hue: null, $saturation: null, $lightness: null,
  $alpha: null)
    • Параметры $red, $green, $blue не должны содержать единиц измерения, и должны находиться в диапозоне от -255 до 255 (включительно).
    • Параметр $hue должен содержать единицу измерения deg или не содержать единицы измерения вовсе.
    • Параметры $saturationи $lightness должны находиться в диапозоне от -100% до 100% (включительно), или быть без единицы измерения. 
    • Параметр $alpha должен быть без единиц измерения и находится в интервале между -1 и 1 (включительно).

    Примеры:

    adjust-color(#6b717f, $red: 15); // #7a717f
adjust-color(#d2e1dd, $red: -10, $blue: 10); // #c8e1e7
adjust-color(#998099, $lightness: -30%, $alpha: -0.4); // rgba(71, 57, 71, 0.6)

    scale-color

    Плавное масштабирование одного или нескольких свойств $base-color. Полный синтаксис:

    scale-color($base-color,
  $red: null, $green: null, $blue: null,
  $saturation: null, $lightness: null,
  $alpha: null)
    • Каждый параметр должен быть числом между -100% и 100% (включительно). Это указывает, как далеко соответствующее свойство должно быть перемещено от его первоначальной позиции к максимуму (если аргумент положительный) или минимуму (если аргумент отрицательный). Это означает, что, например, $lightness: 50% все цвета станут 50% ближе к максимальной яркости, не достигая полной белизны.

    Примеры:

    scale-color(#6b717f, $red: 15%); // #81717f
scale-color(#d2e1dd, $lightness: -10%, $saturation: 10%); // #b3d4cb
scale-color(#998099, $alpha: -40%); // rgba(153, 128, 153, 0.6)

    change-color

    Устанавливает одно или несколько свойств цвета в новые значения.

    change-color($base-color,
  $red: null, $green: null, $blue: null,
  $hue: null, $saturation: null, $lightness: null,
  $alpha: null)
    • Параметры $red, $green, $blue не должны содержать единиц измерения, и должны находиться в диапозоне от 0 до 255 (включительно).
    • Параметр $hue должен содержать единицу измерения deg или не содержать единицы измерения вовсе.
    • Параметры $saturationи $lightness должны находиться в диапозоне от 0 до 100% (включительно), или быть без единицы измерения. 
    • Параметр $alpha должен быть без единиц измерения и находится в интервале между -1 и 1 (включительно).

    Примеры:

    change-color(#6b717f, $red: 100); // #64717f
change-color(#d2e1dd, $red: 100, $blue: 50); // #64e132
change-color(#998099, $lightness: 30%, $alpha: 0.5); // rgba(85, 68, 85, 0.5)

    Оттенок и тень

    Эти 2 дополнительных фильтра доступны в библиотеке Bourbon, расширяющей базовые возможности sass / scss. Они смешивают цвет со значением белого (tint) и черного (shade) делая исходный цвет темнее и светлее. Указывается % от 0 до 100. 

    tint($base-color, 10%)
shade($base-color, 10%)

    Песочница с цветовыми функциями scss

    See the Pen scss color function by riwkus (@riwkus) on CodePen.

    Арефмитические операции с цветами

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

    Сложение двух цветов:

    p {
  color: #010203 + #040506;
}
// вычислит 01 + 04 = 05, 02 + 05 = 07, и 03 + 06 = 09, 
// в результате будет получен цвет:
p {
  color: #050709; 
}

    Умножение на какое-либо целое число:

    p {
  color: #010203 * 2;
}
// вычислит 01 * 2 = 02, 02 * 2 = 04, 03 * 2 = 06,
// преобразуется в:
p {
  color: #020406; 
}

    Арифметические операции доступны и для фильтров прозрачности, но параметр с альфа-каналом должен иметь одинаковое значение:

    p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
// преобразуется в 
p {
  color: rgba(255, 255, 0, 0.75); 
}

     

    front-end scss