Примеси в LESS / Примесь с параметром [4/30]
×

Примесь с параметром [4/30]

В примесь можно передавать параметры. Они указываются внутри скобок объявления примесей. Названия параметров начинаются с символа @. Рассмотрим пример:

LESS.margin(@value) {
    margin-top: @value;
    margin-bottom: @value;
}

.block {
    .margin(10px);
}
CSS.block {
    margin-top: 10px;
    margin-bottom: 10px;
}

Параметры позволяют сделать примеси более универсальными.

Хотите получать макеты для тренировки? Подписывайтесь на полезную рассылку!

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Примесь с параметром</title> <meta charset="utf-8"> <base href="/assets/course125/"> <link href="course.css" rel="stylesheet"> </head> <body class="world"> <div class="monster monster-happy"></div> <div class="monster monster-foolish"></div> </body> </html>
LESS CSS
@red: #ff4136; @blue: #00aef9; @green: #01ff70; .paint-blue() { background-color: @blue; } .monster { background-color: @red; } .monster-foolish { .paint-blue(); } .monster-happy { }
HTML Academy
  1. Создайте примесь .paint() с параметром @color.
  2. Внутри примеси задайте свойству background-color значение @color.
  3. Примените примесь .paint() с параметром @green к монстру .monster-happy.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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