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

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