+7 (916) 177-2000
Блог

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

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

Фронтенд

Опубликовано 7 лет назад
Управляем цветом с помощью цветовых функций Sass
Иван Данилин

Иван Данилин

Fullstack WordPress Developer

Напомню, 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% )
Управляем цветом с помощью цветовых функций Sass
Saturate 25%, Desaturate 25%

Adjust-hue

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

adjust-hue( $color, 25% )
Управляем цветом с помощью цветовых функций Sass
Adjust-Hue 25%

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

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

rgba( $color, .5 )
Управляем цветом с помощью цветовых функций Sass
RGBA 0.5

Tint и Shade

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

tint( $color, 25% )
shade( $color, 25% )
Управляем цветом с помощью цветовых функций Sass
Tint 25%, Shade 25%

В заключение

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

  1. Спасибо! Классный набор фукций, буду пользоваться
    Ответить
  2. Действительно отличный материал. Спасибо за инфу.
    Ответить