Функции цвета

Less умеет вычислять новые цвета из одного основного: сделать темнее для наведения, светлее для фона, прозрачнее для тени. Функция цвета принимает цвет и параметр и возвращает новый цвет. Так вся палитра выводится из нескольких переменных.

Темнее и светлее

darken() и lighten() уменьшают и увеличивают светлоту цвета на заданное число процентов. Сделайте оттенок наведения для кнопки в styles/components/buttons.less:

// styles/components/buttons.less
@primary: #2563eb;
 
.btn {
  color: white;
  background: @primary;
 
  &:hover {
    background: darken(@primary, 10%);
  }
}

.btn {
  color: white;
  background: #2563eb;
}
.btn:hover {
  background: #134cca;
}

<style>
  .btn {
    color: white;
    background: #2563eb;
  }
  .btn:hover {
    background: #134cca;
  }
</style>
 
<button class="btn">Наведите на меня</button>

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

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

fade() задаёт цвету непрозрачность в процентах — удобно для теней и подложек:

// styles/components/cards.less
@primary: #2563eb;
 
.card {
  border: 1px solid fade(@primary, 30%);
  box-shadow: 0 4px 12px fade(@primary, 20%);
}

.card {
  border: 1px solid rgba(37, 99, 235, 0.3);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

Less вывел rgba() с прозрачностью 0.3 и 0.2.

Смешивание

mix() смешивает два цвета, tint() — смешивает с белым, shade() — с чёрным. Это даёт мягкие фоны для сообщений:

// styles/components/alerts.less
@danger: #dc2626;
 
.alert-danger {
  color: shade(@danger, 40%);
  background: tint(@danger, 85%);
  border-left: 4px solid @danger;
}

.alert-danger {
  color: #841717;
  background: #fadede;
  border-left: 4px solid #dc2626;
}

<style>
  .alert-danger {
    color: #841717;
    background: #fadede;
    border-left: 4px solid #dc2626;
  }
</style>
 
<div class="alert-danger" style="padding: 12px">Не удалось сохранить пост.</div>

Справочная таблица

Функция	Что делает
`lighten(@c, 10%)`, `darken(@c, 10%)`	Светлее и темнее
`saturate(@c, 10%)`, `desaturate(@c, 10%)`	Ярче и бледнее
`fade(@c, 50%)`	Задаёт непрозрачность
`fadein(@c, 10%)`, `fadeout(@c, 10%)`	Меньше и больше прозрачности
`mix(@a, @b, 50%)`	Смесь двух цветов
`tint(@c, 20%)`, `shade(@c, 20%)`	Смесь с белым и с чёрным
`spin(@c, 180)`	Поворот оттенка на цветовом круге
`greyscale(@c)`	Оттенок серого
`contrast(@c)`	Чёрный или белый — что лучше читается на `@c`

contrast() полезна для текста на цветном фоне: на жёлтом #facc15 она вернёт чёрный, на синем #2563eb — белый.

Частая ошибка

Непрозрачность в fade() задаётся в процентах. Число 0.5 Less поймёт как полпроцента:

// styles/components/cards.less
.card {
  box-shadow: 0 4px 12px fade(#2563eb, 0.5);
}

.card {
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.005);
}

Тень почти невидима. Пишите fade(#2563eb, 50%).

Спасибо, что читаете!