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

Шаблоны примесей, часть 3

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

Less.font-size(bigger; @size)  {
  font-size: @size * 2;
}

.font-size(smaller; @size) {
  font-size: @size / 2;
}

.font-size(@_; @size) {
  color: #000000;
} // универсальный шаблон

.content-bigger {
  .font-size(bigger; 20px);
}

.content-smaller {
  .font-size(smaller; 20px);
}

Универсальный шаблон применяется вместе с остальными шаблонами:

CSS.content-bigger {
  font-size: 40px;
  color: #000000;
}

.content-smaller {
  font-size: 10px;
  color: #000000;
}

В качестве имени в универсальный шаблон передаётся специальная переменная @_, за ней следуют параметры. Важно, чтобы универсальный шаблон принимал те же параметры, что и все остальные шаблоны.

Давайте применим к монстрам разные шаблоны и создадим универсальный шаблон, который применится одновременно со всеми остальными.

Хорошо владеете JavaScript, но до сих пор не освоили Node.js? Записывайтесь на профессиональный курс «Node.js. Профессиональная разработка REST API». Цена 12 000 ₽.

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

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

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

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

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

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