Примеси в LESS / Примеси [2/30]
×

Примеси [2/30]

Ещё одна интересная возможность LESS — примеси. Мы можем «примешивать» содержимое одного CSS-правила в другое. Для этого нужно написать имя «примешиваемого» правила внутри другого правила. Рассмотрим пример:

LESS.white { color: white; } /* объявление примеси */
.text { .white; }        /* применение примеси */

Этот LESS-код скомпилируется в такой CSS:

CSS.white { color: white; }
.text { color: white; }

Как мы видим, в правиле, где была «вызвана» примесь .white, появилось её содержимое.

Чтобы не выводить саму примесь в CSS, нужно после объявления примеси поставить скобки:

LESS.white() { color: white; } /* объявление невыводимой примеси */
.text { .white; }          /* применение примеси */
CSS.text { color: white; }

При применении примеси скобки писать необязательно.

LESS/* Эти выражения дают один и тот же результат: */
.mixin();
.mixin;

Выполнить задание
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 red"></div> <div class="monster monster-foolish"></div> </body> </html>
LESS CSS
@red: #ff4136; .red { background-color: @red; } .monster-foolish { }
HTML Academy
  1. Для монстра .monster-foolish примените в LESS примесь .red.
  2. Сделайте примесь .red невыводимой в стили.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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