Приступаем к очередной интересной и обширной теме - как с помощью Sass/Compass облегчить себе жизнь при работе с цветами во время верстки.
Каждый верстальщик хорошо знает, как часто ему приходиться при верстке определять и манипулировать цветами в CSS-коде. Препроцессор Sass и его библиотека Compass обладают богатым набором функций, предназначеных для всевозможных операций с цветом в SCSS-коде.
Эта статья посвящена обзору функций Sass и Compass для работы с цветом. Начнем, как обычно, с самой простой функции и будем плавно продвигаться от простого к сложному.
Первоначальная настройка проекта Compass
Для начала создадим пустойй проект Compass и настроим его. Инициализируем несколько переменных 1
$color
1
$color1
@import "compass/reset";
$color: hsla(120,100%,50%,.5);
$color1: hsla(240,100%,50%,.5);
$unit: 180px;
div{
height: $unit;
width: $unit;
border: 1px solid #000;
margin: 10px;
float: left;
text-align: center;
font-weight: bold;
font-size: 1.3rem;
color: darken($color,80%);
line-height: $unit;
}
.origin{
background-color: $color;
}Фунции lighten и darken
Начнем с самых простых функций - 1
lighten
1
darken
1
lighten
1
darken
Синтаксис функций 1
lighten
1
darken
1
$color
.lighten{
background-color: lighten($color,10%);
}
.darken{
background-color: darken($color,10%);
}
Функции lighten и darken могут использоваться в любом месте SCSS-кода - везде, где применяется цвет. Например, видоизменим показанный выше пример. Применим функции lighten и darken для изменения цвета шрифта, границы и фона:
.mixin{
font-size: .95rem;
background-color: lighten($color,20%);
border: 1px solid darken($color,30%);
color: darken($color,60%);
}
Функции complement и invert
Переходим к функциям обратного преобразования цвета. Первая функция 1
complement
1
$color
1
complement
.complement{
background-color: complement($color);
}В результате на выходе получим цвет, расположенный на 180 градусов по отношению к исходному цвету. Чтобы было понятнее, посмотрим на “HSLA wheel”:
Исходным цветом у нас является 1
hsla(120,100%,50%,.5)
1
hsla(300,100%,50%,.5)
1
complement
Функция 1
invert
1
complement
1
invert
1
complement
1
opacity
.invert{
background-color: invert($color);
}
Функция adjust-hue
Функция 1
adjust-hue
1
complement
1
complement
1
adjust-hue
Другими словами, можно задать угол, отличный от 180 градусов. Кроме того, значение угла может быть как положительным, так и отрицательным:
.adjusthue_plus{
background-color: adjust-hue($color,80deg);
}
.adjusthue_minus{
background-color: adjust-hue($color,-80deg);
}
Функции saturate и desaturate
В препроцессоре Sass имеется пара функций для управления насыщеностью цвета.
Функция 1
saturate()
.saturate{
background-color: saturate($color,80%);
}… увеличивает насыщенность цвета от исходного.
А функция 1
desaturate()
.desaturate{
background-color: desaturate($color,80%);
}… наоборот, уменьшает насыщенность цвета от исходного.
Функции transparentize и fade-out
Функция 1
transparentize
Значение прозрачности может находиться в диапазоне от 0 (полностью прозрачный) до 1 (полностью непрозрачный):
.transparentize{
background-color: transparentize($color,.2);
}Функция 1
fade-out
1
transparentize
.fadeout{
background-color: fade-out($color,.2);
}
Функции opacify и fade-in
Функции 1
opacify
1
fade-in
1
transparentize
1
fade-out
.opacify{
background-color: opacify($color,.3);
}
.fadein{
background-color: fade-in($color,.3);
}
Функция grayscale
Функция преобразования исходного цвета в оттенки серого чрезвычайно проста в использовании. В принципе, тут и рассказывать особенно нечего:
.grayscale{
background-color: grayscale($color);
}
Функция rgba
Если стоит задача преобразования исходного цвета (заданного в виде переменной, в формате HEX или HSLA) в формат RGBA, в этом случае на помощь придет функция 1
rgba
.rgba{
background-color: rgba($color,.2);
}
С практической точки зрения функция rgba равносильна функции transparentize/fade-out или opacify/fade-in.
Функция mix
В препроцессоре Sass имеется функция смешивания цветов для получения на выходе одного, результирующего цвета. Другими словами, у нас имеются два цвета, представленные переменными 1
$color
1
$color1
1
mix
.mix{
background-color: mix($color,$color1,70%);
}В показанном выше примере у функции 1
mix
1
$color
1
$color1
1
$color
1
$color1
Функция adjust-color
Вот мы и подошли к более сложным функциям препроцессора Sass. Первой из таких функций является 1
adjust-color
1
adjust-color
Функция 1
adjust-color
Каждому цвету в этой функции соответствует одноименный аргумент:
1
$red
1
$green
1
$blue
1
$hue
1
$saturation
1
$lightness
1
$alpha
Хватит теории, давайте рассмотрим работу функции adjust-color на примерах.
- Изменение цвета от исходного
1
$color
1
$color
1
$hue
.adjustColorHue{
background-color: adjust-color($color,$hue:40);
}
- Изменение цвета и светлоты одновременно. Первым аргументом $color задается исходный цвет, вторым аргументом устанавливается цвет $hue, третьим аргументом задается изменение светлоты $lightness:
.adjustColorHueLightness{
background-color: adjust-color($color,$hue:40,$lightness:30);
}
- Изменение двух каналов цвета одновременно для цветовой модели RGB. Функции
1
adjust-color
1
$color
1
$red
1
$green
.adjustColorRedGreen{
background-color: adjust-color($color,$red:40,$green:30);
}
- Смешивание аргументов цветовых моделей RGB и HSL в функции adjust-color. Передадим функции adjust-color аргументы исходного цвета $color, аргумент красного канала $red модели RGB и аргумент $hue модели HSL:
.adjustColorError{
background-color: adjust-color($color,$red:40,$hue:20);
}В результате компиляции данного кода в CSS получим такую ошибку:
Syntax error: Cannot specify HSL and RGB values for a color at the same time for `adjust-color'
on line 38 of .../sass/style.scss… которая говорит о том, что в функции 1
adjust-color
Поэтому нужно быть внимательным при работе с функцией adjust-color и не допускать одновременной передачи функции аргументов разных цветовых моделей RGB и HSL.
Функция scale-color
Рассмотренная выше функция 1
adjust-color
1
scale-color
.origin{
background-color: $color;
}
.adjustcolor{
background-color: adjust-color($color,$lightness:-20%);
}
.scalecolor{
background-color: scale-color($color,$lightness:-20%);
}
В данном примере функция 1
adjust-color
1
$color
1
20%
1
scale-color
1
$color
1
100%
1
scale-color
1
20%
Неудивительно, что в показанном выше примере результат функции 1
scale-color
1
adjust-color
Функции shade и tint
Фреймворк Сompass также, как и препроцессор Sass, имеет в своем составе некоторое количество функций для работы с цветом. Наиболее интересными среди них могу показаться две функции - 1
shade
1
tint
Функция 1
shade
.shade{
background-color: shade($color,40%);
}
Функция 1
tint
1
$color
1
30%
.tint{
background-color: tint($color,30%);
}
Заключение
На этом обзор “цветовых” функций препроцессора Sass и библиотеки Compass можно считать завершенным. В качестве вывода можно сказать, что благодаря подобным функциям упрощается и убыстряется работа при верстке дизайна сайта.
Более того, с помощью данных функций, имея в качестве входного значения всего один цвет, можно создать отличный дизайн в профессиональной цветовой палитре. И не прибегнуть ни к одному из графических инструментов.
Помимо использования рассмотренных выше цветовых функций каждой по отдельности, можно комбинировать их в одном выражении, создавая достаточно сложные конструкции.
Данная статья является вольным переводом главы “Manipulate Color with Ease” замечательной книги “Sass and Compass for Designers” автора Ben Frain.
