• Теория
  • Теория

Вложенные правила, шаг 2

С помощью вложенных правил можно не только обращаться к дочерним элементам, но и составлять по частям комплексные названия классов. Например, следующий код:

.super-button-red {
  color: red;
}

.super-button-blue {
  color: blue;
}

можно записать проще c помощью вложенных правил:

.super-button {
  &-red { color: red; }

  &-blue { color: blue; }
}
Смещённый на 60 градусов цвет на цветовом колесе

То есть, если перед вложенным правилом поставить амперсанд &, то оно станет родственным родительскому, и Less подставит родительский селектор вместо амперсанда.

Воспользуемся этой особенностью для структурирования кода нашей цветовой схемы. Создадим второй цвет палитры — яркий акцентный цвет ошибки, повернув цветовое колесо на 60° по часовой стрелке относительно базового, чтобы цвет сместился в красную область.

Сохраним полученный цвет в переменной и зададим с её помощью фон второго контейнера.

Хотите начать карьеру веб-разработчика? Записывайтесь на профессию «Фронтенд-разработчик», которая стартует 27 мая 2024. Всего от 4690 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Знакомство с Less» тренажёра «Инструменты автоматизации: препроцессор» можно после регистрации и оформления подписки.