Работа с функциями цвета в Less

Less предоставляет ряд полезных функций для работы с цветами, такие как lighten(), darken(), saturate(), desaturate(), fadein(), fadeout(), fade(), spin() и mix(). Я думаю по названиям понятно общее предназначение той или иной функции, а теперь давайте рассмотрим их вблизи.

Возьмём самый простой цвет и попробуем с ним поработать. И так,

    @color: #7bab2e;  

1. Попробуем сделать нашу обводку либо темнее , чем основной цвет заливки, либо светлее

// Для создание более тёмного тона
    .box.darken {  
        background-color: @color;  
        border: 3px solid darken(@color, 20%);  
    }  
// Для создания более светлого тона
    .box.lighten {  
        border: 3px solid lighten(@color, 20%);  
    }  

Вот что мы получим
Вот что мы получим

Также мы можем объявлять эту функцию немного по другому, к примеру так

@colorDark: darken(@color, 20%);  
  
.box.darken {  
    background-color: @color;  
    border: 3px solid @colorDark;  
}  

2. Следующая функция предназначена для того чтобы вы могли настраивать параметры насыщенности и оттенка, на английском Hue/Saturation
Максимальные значения для задания этого параметра это 180 и -123
И так, попробуем поиграть с цветом

// Случай 1
    .box.hue {  
        background-color: spin(@color, 123);  
    }  
// Случай 2
    .box.desaturate {  
        background-color: desaturate(spin(@color, 123), 50%);  
    }  

Причём заметьте, что во втором случае мы уменьшили насыщенность цвета на 50%.
Вот что мы получим
Вот что мы получим - hue

3. А теперь попробуем смещать цвета

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

Как известно, если смешать синий и жёлтый, то должен получиться зелёный.
синий плюс жёлтый

Обратите внимание, что наш зелёный цвет какой-то странный, это всё из-за того, что мы смешивали не полноценные цвета, а лишь их 50%.



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *