Color (цвет) – это один из ключевых аспектов создания сайта, именно цветовая схема может сделать сайт привлекательным. С помощью LESS у нас есть возможность определять и применять цвета более согласованно, используя переменные. Более того, мы также можем использовать функции цветов, чтобы связывать и трансформировать цвета без необходимости использовать палитру.
Функции
LESS представляет несколько функций с довольно описательными названиями, которые мы можем использовать для управления цветом: lighten(), darken(), saturate(), desaturate(), fadein(), fadeout(), fade() spin() и mix().
Давайте опробуем некоторые из этих функций, чтобы увидеть, как это работает. В целях данного поста, мы берем зеленый (#7bab2e) в качестве переменной для данного демо.
@color: #7bab2e;
Затемнение и осветление
Изменять цвета при помощи LESS Color Function довольно просто. На нижеприведенном примере мы затемним @color на 20% от исходного значения;
.box.darken {
background-color: @color;
border: 3px solid darken(@color, 20%);
}
Этот код даст нам следующий результат. Граница, в сравнении с цветом внутри зеленого блока, будет темнее.
Таким же образом мы можем осветлить цвет @color;
.box.lighten {
border: 3px solid lighten(@color, 20%);
}
Обратите внимание, что граница теперь светлее фона.
Кроме того, мы также можем сохранять эти функции внутри переменных, а затем применять их посредством таблиц стилей следующим образом;
@colorDark: darken(@color, 20%);
.box.darken {
background-color: @color;
border: 3px solid @colorDark;
}
Подстройка цветов
Давайте опробуем еще одну функцию – на этот раз мы попробуем изменить цвет @color. Функция spin() в LESS используется для настройки оттенка. Если вы когда-нибудь игрались с настройками Hue/Saturation в Photoshop, то здесь функция довольно схожая.
Давайте рассмотрим следующий код.
.box.hue {
background-color: spin(@color, 123);
}
Максимальное значение для hue составляет 180, но также допускаются и отрицательные значения вроде -123.
В LESS мы не ограничены применением лишь одной функции, можно одновременно применять и две. Давайте рассмотрим пример:
.box.desaturate {
background-color: desaturate(spin(@color, 123), 50%);
}
В данном коде мы сначала подстраиваем @color на 123, а затем немного обесцвечиваем результат на 50%. Вот что у нас получилось.
Смешиваем цвета
Наконец, попробуем смешать цвета при помощи функции mix(). Эта функция позволит нам получить цвет в результате смешивания двух других. Если вы помните о том, как получается зеленый цвет (нужно смешать синий и желтый), то давайте попробуем сделать то же самое в LESS;
.box.mix {
background-color: mix(@blue, @yellow, 50%);
}
Этой функции потребуется три параметра – первые два будут отвечать за комбинируемые цвета, а третий – за вес каждого цвета. Мы здесь выставили 50%. Тем не менее, последний параметр немного странный.
Например, 0% в результате даст нам полное превалирование первого указанного цвета (в данном случае @blue), а 100% даст полную противоположность. Финальный результат, конечно, очевиден, мы получили зеленый, но этот зеленый не совсем то, что мы ожидали увидеть.
Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
Подытожим
Функции управления цветом действительно удобны и необходимы. Так как мы можем воспользоваться лишь одним цветом, а потом изменить его так, чтобы получить довольно привлекательную цветовую схему для сайта.