Курс «Знакомство с LESS»

Вложенные правила, шаг 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

Переменной @distance задайте значение 60.
Значение переменной @error-color вычислите с помощью функции spin, повернув базовый цвет @base-color на величину @distance.

Теория Проверить Следующее задание

Идёт запись на курс PHP, уровень 1 #, который стартует 29 января.

Курсы

Интенсивы

Информация

Остальное