Вложения в Less

CSS не зря расшифровывается как каскадные таблицы стилей, потому что одни элементы могут находиться внутри других и к ним последовательно применяются стилевые правила. Для наглядного представления структуры элементов в Less применяются вложения, которые затем преобразуются во вложенные селекторы. Например, в коде HTML у нас имеется следующая структура элементов, схематично показанная ниже.

<aside>
  <div class="block">
    <ul>
      <li>...</li>
      <li>...</li>
    </ul>
  </div>
</aside>

Чтобы сохранить структуру в CSS мы вкладываем одни правила внутрь фигурных скобок родителя.

aside {
  .block {
    margin-bottom: 30px;
    ul {
      margin: 0;
      padding: 0;
      font-size: 14px;
      li {
        border-top: 1px solid #f4f4f4;
        list-style: none;
        color: #666;
        padding: 3px 0;
        position: relative;
        &:first-child {
          border-top: none;
        }
      }
    }
  }
}

Для добавления псевдоклассов и псевдоэлементов применяется амперсанд (символ &), он говорит Less что надо взять и подставить вместо него родительский селектор, в данном случае li. В итоге получим такой стиль.

aside .block {
  margin-bottom: 30px;
}
aside .block ul {
  margin: 0;
  padding: 0;
  font-size: 14px;
}
aside .block ul li {
  border-top: 1px solid #f4f4f4;
  list-style: none;
  color: #666;
  padding: 3px 0;
  position: relative;
}
aside .block ul li:first-child {
  border-top: none;
}

Less полностью сохраняет структуру вложения и показывает её в именах селекторов. Для сложных комбинаций вроде родственных селекторов (A+B, A>B, A~B) применяется амперсанд, а после него пишется соответствующий знак.

В качестве примера рассмотрим поле для ввода чисел. Если введённое пользователем число меньше заранее установленного минимального или больше максимального значения, то выводим сообщение об ошибке. Для этого применяется псевдокласс :out-of-range и псевдоэлемент ::after. Код HTML для этого будет следующий:

<p><input type="number" id="dec" min="1" max="10" value="1">
<label for="dec"></label></p>

CSS:

input[type="number"]:out-of-range {
  background: #f9c3d2;
}
input[type="number"]:out-of-range + label::after {
  content: 'Неверное число';
  color: #ec008c;
  margin-left: 0.5em;
}

Поскольку у нас используется псевдокласс и псевдоэлемент, то активно применяется амперсанд и вложения одних стилевых правил в другие.

input[type="number"] {
  &:out-of-range {
    background: #f9c3d2;
    & + label { 
      &::after {
        content: 'Неверное число';
        color: #ec008c;
        margin-left: 0.5em;
      }
    }
  }
}