Отвлечёмся ненадолго от цвета и рассмотрим ещё одну замечательную особенность 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 сам составляет итоговые селекторы.

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