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

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

Отвлечёмся ненадолго от цвета и рассмотрим ещё одну замечательную особенность LESS — вложенные правила. Они позволяют избавиться от дублирования одинаковых названий в коде и делают его более структурированным. Например, вот такой код:

.super-class-name {
    color: #ffffff;
}
.super-class-name a {
    text-decoration: none;
}
.super-class-name a span {
    font-size: 1em;
}

можно более кратко и без повторов написать, используя вложенность:

.super-class-name {
    color: #ffffff;
    a {
        text-decoration: none;
        span {
            font-size: 1em;
        }
    }
}

То есть вложенные правила просто пишутся внутри других правил. Из цепочек вложенных правил LESS сам составляет итоговые селекторы.

Попробуем написать вложенное правило.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Вложенные правила, шаг 1</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); .color-primary { background-color: @base-color; } .palette-item { display: block; /* вложенное правило создайте тут */ }
HTML Academy
  1. Блокам .palette-item задайте свойство display со значением inline-block.
  2. Затем внутри правила .palette-item создайте вложенное правило, в котором для .color обнулите значение border-radius.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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