Продолжим создавать библиотеку компонентов: с помощью цветов из разработанной палитры зададим состояния кнопок. И по ходу дела разберём другие функции Less для работы с цветом.

Сначала зададим базовый цвет для фона кнопок и добавим его вариации по наведению и нажатию на кнопку. По наведению будем делать кнопку чуть светлее, а в момент нажатия — темнее. Для этого воспользуемся Less-функциями lighten и darken. Их синтаксис одинаковый:

color: lighten(red, 50%); // светлее red на 50%
color: darken(blue, 25%); // темнее blue на 25%

Второе значение задаётся в процентах от 0% до 100%. При задании 100% в lighten функция возвращает полностью белый цвет, а 100% для darken — полностью чёрный. То есть эти функции «смешивают» заданный цвет с белым или чёрным.

Итак, давайте зададим кнопкам нужные цвета и снова воспользуемся вложенными правилами. Чтобы задать смену цвета и для демонстрационного класса btn-hover, и для псевдокласса btn:hover, нужно прописать вложенные правила в Less так:

.btn {
  &-hover,
  &:hover {
    color: red;
  }
}

Этот Less преобразуется в следующий CSS:

.btn-hover,
.btn:hover {
  color: red;
}