Знакомство с 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 сам составляет итоговые селекторы.

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

Всегда было интересно, как работает бэкенд? Попробуйте создать небольшое приложение на базовом интенсиве по PHP.

Выполнить задание
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, уровень 1 #21, который стартует 28 мая.

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

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

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

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