Знакомство с LESS / Цветовые функции, шаг 2 [10/14]
×

Цветовые функции, шаг 2 [10/14]

Продолжим создавать библиотеку компонентов: с помощью цветов из разработанной палитры зададим состояния кнопок. И по ходу дела разберём другие функции 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;
}

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Цветовые функции, шаг 2</title> <meta charset="utf-8"> <base href="/assets/course85/"> <link href="course.css" rel="stylesheet"> </head> <body> <article class="controls"> <h1>Кнопки</h1> <section> <h2>default</h2> <button class="btn btn-primary">Нажать</button> </section> <section> <h2>hover</h2> <button class="btn btn-primary-hover">Нажать</button> </section> <section> <h2>pressed</h2> <button class="btn btn-primary-pressed">Нажать</button> </section> <section> <h2>disabled</h2> <button class="btn btn-primary-disabled">Нажать</button> </section> </article> </body> </html>
LESS CSS
@base-color: rgb(110, 27, 255); .btn { &-primary { background-color: @base-color; /* &-правила добавьте тут */ } }
HTML Academy

Внутри вложенного правила &-primary кнопки .btn создайте:

  1. вложенное правило &-hover, &:hover, в котором задайте цвет фона lighten(@base-color, 20%);
  2. вложенное правило &-pressed, &:active, в котором задайте цвет фона darken(@base-color, 20%).

Проверьте, как меняется цвет кнопки .btn-primary по наведению и нажатию на неё.

Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.