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); 
}

 

?

Благодарю за ответ!

Была ли эта информация полезной?

Здравствуйте!

Позвольте представиться, меня зовут Марина. Более 10 лет я занимаюсь обслуживанием сайтов и развитием интернет проектов. Если вы хотите избавиться от хлопот связанных с созданием и поддержкой сайта, тогда вы попали по адресу. При работе с сайтами я предоставляю качественные услуги, ориентируясь на ваши индивидуальные потребности. Для связи со мной воспользуйтесь формой обратной связи.

Инсталента
Пожалуйста, активируйте JavaScript.
Please enable JavaScript.
return; 1