Миксины

Миксин — именованный кусок разметки, который объявляют один раз и вызывают сколько угодно раз. Он похож на функцию: может принимать аргументы и выдавать разную разметку. Миксины избавляют от копирования одинаковых карточек, кнопок и блоков.

Объявление и вызов

Миксин объявляется словом mixin и именем, а его разметка пишется ниже с отступом. Вызов — имя миксина с плюсом впереди. В src/index.pug:

mixin hours
  p.hours Каждый день с 8:00 до 20:00.
 
+hours
+hours

Само объявление ничего не выводит. Каждый вызов +hours вставляет разметку миксина:

<p class="hours">Каждый день с 8:00 до 20:00.</p>
<p class="hours">Каждый день с 8:00 до 20:00.</p>

Аргументы

Аргументы перечисляются в скобках, как у функции JavaScript. Карточка напитка с названием и ценой:

mixin drink(name, price)
  .card
    h3= name
    p.price $#{price}
 
+drink("Капучино", 3)
+drink("Эспрессо", 2)

Одна и та же разметка получила разные данные:

<div class="card">
  <h3>Капучино</h3>
  <p class="price">$3</p>
</div>
<div class="card">
  <h3>Эспрессо</h3>
  <p class="price">$2</p>
</div>

Аргументу можно задать значение по умолчанию: mixin drink(name, price = 3) — тогда вызов +drink("Латте") выведет цену $3.

Миксин в цикле

Миксины хорошо сочетаются с each. Возьмите массив menu, который передаёт build.js из урока о циклах:

mixin drink(name, price)
  .card
    h3= name
    p.price $#{price}
 
each item in menu
  +drink(item.name, item.price)

Цикл вызывает миксин для каждого напитка:

<div class="card">
  <h3>Эспрессо</h3>
  <p class="price">$2</p>
</div>
<div class="card">
  <h3>Капучино</h3>
  <p class="price">$3</p>
</div>
<div class="card">
  <h3>Какао</h3>
  <p class="price">$3</p>
</div>

Содержимое внутри вызова

Под вызовом миксина можно написать разметку с отступом. Внутри миксина она доступна под словом block:

mixin card(title)
  .card
    h3= title
    if block
      block
    else
      p Описание скоро появится.
 
+card("Капучино")
  p Эспрессо со взбитым молоком.
+card("Раф")

if block проверяет, передали ли содержимое. У капучино оно есть, у рафа — нет, и выведен текст по умолчанию:

<div class="card">
  <h3>Капучино</h3>
  <p>Эспрессо со взбитым молоком.</p>
</div>
<div class="card">
  <h3>Раф</h3>
  <p>Описание скоро появится.</p>
</div>

Где хранить миксины

Когда миксинов становится много, их переносят в отдельный файл, например src/mixins.pug, и подключают на каждой странице. Как подключать файлы, показано в следующем уроке.

Частая ошибка

Вызвать миксин без плюса:

mixin drink(name)
  p= name
 
drink("Капучино")

Без + Pug считает drink обычным тегом, а скобки — его атрибутами:

<drink Капучино="Капучино"></drink>

Миксин всегда вызывается через +: +drink("Капучино").