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

Шаблоны примесей, часть 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;
}

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

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

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

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

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

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

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

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