Главная > CSS/Style Sheets > Знакомство с функциями color в LESS

Знакомство с функциями color в LESS


18 февраля 2013, 15:00. Разместил: Design FactoRy
Мы уже рассказали вам довольно многое о LESS – от создания привлекательной навигации до советов о более эффективной разработке при помощи LESS, но это еще далеко не все! Сегодня мы хотим рассказать вам о функциях Color в LESS.

Знакомство с функциями color в LESS

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 в LESS

Таким же образом мы можем осветлить цвет @color;

.box.lighten {
border: 3px solid lighten(@color, 20%);
}

Обратите внимание, что граница теперь светлее фона.

Знакомство с функциями color в LESS

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

@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.

Знакомство с функциями color в LESS

В LESS мы не ограничены применением лишь одной функции, можно одновременно применять и две. Давайте рассмотрим пример:

.box.desaturate {
background-color: desaturate(spin(@color, 123), 50%);
}

В данном коде мы сначала подстраиваем @color на 123, а затем немного обесцвечиваем результат на 50%. Вот что у нас получилось.

Знакомство с функциями color в LESS

Смешиваем цвета

Наконец, попробуем смешать цвета при помощи функции mix(). Эта функция позволит нам получить цвет в результате смешивания двух других. Если вы помните о том, как получается зеленый цвет (нужно смешать синий и желтый), то давайте попробуем сделать то же самое в LESS;

.box.mix {
background-color: mix(@blue, @yellow, 50%);
}

Этой функции потребуется три параметра – первые два будут отвечать за комбинируемые цвета, а третий – за вес каждого цвета. Мы здесь выставили 50%. Тем не менее, последний параметр немного странный.

Например, 0% в результате даст нам полное превалирование первого указанного цвета (в данном случае @blue), а 100% даст полную противоположность. Финальный результат, конечно, очевиден, мы получили зеленый, но этот зеленый не совсем то, что мы ожидали увидеть.

Знакомство с функциями color в LESS

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.


Подытожим

Функции управления цветом действительно удобны и необходимы. Так как мы можем воспользоваться лишь одним цветом, а потом изменить его так, чтобы получить довольно привлекательную цветовую схему для сайта.
Вернуться назад