Знакомство с LESS / Вложенные правила, шаг 2 [6/14]
×

Вложенные правила, шаг 2 [6/14]

С помощью вложенных правил можно не только обращаться к дочерним элементам, но и составлять по частям комплексные названия классов. Например, следующий код:

.super-button-red {
    color: red;
}
.super-button-blue {
    color: blue;
}

можно записать проще c помощью вложенных правил:

.super-button {
    &-red { color: red; }
    &-blue { color: blue; }
}

То есть, если перед вложенным правилом поставить амперсанд &, то оно станет родственным родительскому, и LESS подставит родительский селектор вместо амперсанда.

Воспользуемся этой особенностью для структурирования кода нашей цветовой схемы. Cоздадим второй цвет палитры — яркий акцентный цвет ошибки, повернув цветовое колесо на 60° по часовой стрелке относительно базового, чтобы цвет сместился в красную область.

Сохраним полученный цвет в переменной и зададим с её помощью фон второго контейнера.


Выполнить задание
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="palette"> <h1>Базовые цвета</h1> <figure class="palette-item"> <figcaption>Основной</figcaption> <span class="color color-primary">primary</span> </figure> <figure class="palette-item"> <figcaption>Ошибка</figcaption> <span class="color color-error">error</span> </figure> </article> </body> </html>
LESS CSS
@base-color: rgb(110, 27, 255); @distance: 0; @error-color: #cccccc; .color { &-primary { background-color: @base-color; } &-error { background-color: @error-color; } } .palette-item { display: inline-block; .color { margin: 0.5em; } }
HTML Academy
  1. Переменной @distance задайте значение 60.
    Значение переменной @error-color вычислите с помощью функции spin, повернув базовый цвет @base-color на величину @distance.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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