Управляем цветом с помощью цветовых функций Sass

Кто работает с Sass, знает насколько он удобен по сравнению с CSS. Сегодня я расскажу про функции Sass для управления и манипуляций с цветом, которые существенно ускоряют разработку и покажу несколько примеров.

Напомню, Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.

Список функций для работы с цветом в Sass

rgb($red, $green, $blue)	Цвета из красного, зеленого и синего цветов
rgba($red, $green, $blue, $alpha)	Цвета из красного, зеленого, синего цветов и альфа-канала
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])	Смешение двух цветов, $weight — пропорции смешивания
adjust-hue($color, $degrees) adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])	Регулировка параметров цвета Пример: adjust-color($color,$hue:25)
scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])	Цвет на основе исходного цвета Пример: scale-color($color,$lightness:-25%)
complement($color)	Комплементарный цвет
invert($color)	Инвертный цвет
grayscale($color)	Обесцвечивание
darken($color, $amount)	Цвет темнее
saturate($color, $amount)	Увеличение насыщенности цвета
desaturate($color, $amount)	Уменьшение насыщенности цвета
alpha($color) opacity($color)	Степень прозрачности альфа-канала
transparentize($color, $amount) opacify($color, $amount)	Уровень прозрачности цвета
rgba($color, $alpha)	Цвет в формате RGB с альфа-каналом
shade($color,$amount)	Смешение цвета с черным
tint($color,$amount)	Смешение цвета с белым

Остановимся подробнее и рассмотрим несколько примеров. Для этого зададим переменную, с которой будем проводить манипуляции:

$color: #413F4F;

Darken и Lighten

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

darken( $color, 25% )
lighten( $color, 25% )

Управляем цветом с помощью цветовых функций Sass — Darken 25%, Lighten 25%

Saturate, & Desaturate

Работают по тому же принципу, что и предыдущие параметры, только насыщают цветом или, наоборот, обесцвечивают.

saturate( $color, 25% )
desaturate( $color, 25% )

Adjust-hue

Регулирует значение оттенка HSL в процентах.

adjust-hue( $color, 25% )

Прозрачность

Добавить прозрачность к цвету в шестнадцатеричной форме как в RGBA. Значения прозрачности альфа-канала варьируются от 0 до 1.

rgba( $color, .5 )

Tint и Shade

Добавить к цвету оттенок или тень. В отличие от Darken и Lighten, добавляют смешанный с белым (tint) или черным (shade) цвет.

tint( $color, 25% )
shade( $color, 25% )

В заключение

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