HTML: Препроцессор Pug
2026-02-26 23:17 Diff
https://ru.hexlet.io/courses/html-pug/lessons/html/theory_unit

Первое, с чем стоит ознакомиться при изучении Pug — синтаксис HTML разметки. Он не очень сложный, но имеет несколько ключевых моментов, которые влияют на компиляцию разметки.

В Pug нет понятий открытия и закрытия тегов, все теги указываются один раз без необходимости их закрывать. Например,

выведет

Это одна из причин, по которой разработчики любят html-препроцессоры. Как часто вы допускали ошибку в отсутствии закрывающего тега? Здесь этого не будет. Обратите внимание, что Pug, при компиляции в HTML, блочные элементы располагает на новых строках, а строчные на той же. Это может немного запутать вначале, но не бойтесь — вам редко понадобится смотреть в итоговый HTML.

Чтобы вложить контент внутрь тегов, возможны три варианта:

  1. Инлайн-стиль. Весь контент располагается сразу после обозначения тега.
  2. Pipe-стиль. Контент можно расположить в несколько строк. Каждая строка начинается с символа |
  3. Блочный стиль. Контент можно располагать в несколько строк. Для этого сразу после тега указывается точка.

Самая сложная часть при работе с текстом в Pug — пробельные символы. Попробуйте различные варианты текстов и тегов внутри. В конце урока мы разберём этот вопрос подробнее.

Вложенность тегов

Для создания вложенности в Pug используются отступы. Их количество может быть любым. Зачастую ориентируются на стандарт отступов в HTML, то есть в два пробела. Например,

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

Атрибуты

Добавление атрибутов поначалу может немного запутать. Pug предоставляет несколько возможностей по добавлению атрибутов.

  1. Используя круглые скобки. В таком варианте возможно добавлять все аргументы, в том числе и пользовательские.
  2. Специальный синтаксис для классов и идентификаторов. Они просто обозначаются внутри разметки и похожи на селекторы CSS

В разработке для классов используют второй синтаксис, а все другие атрибуты записываются в скобках. Здесь нет выработанных стандартов, но такое использование позволяет сократить код следующим образом: если не указать тег, а сразу написать класс, то Pug автоматически создаст <div> с нужным классом.

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

Интерполяция тегов

Эта техника работы с тегами достаточно редкая, но всегда стоит иметь в виду её наличие. Внутри текста Pug позволяет использовать специальную конструкцию, чтобы добавить тег. Это помогает не дробить текст на несколько разных частей. Например, как вставить тег внутрь такого параграфа?

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

Избежать этого помогает конструкция #[тег контент].

Пробельные символы

Самая распространённая проблема при изучении Pug — понимание работы с отступами. На первый взгляд может показаться, что в этом не должно быть проблемы — ставь отступы и они появятся в HTML. И правда, в большинстве случаев Pug перенесёт все пробельные символы так, как они были установлены, но есть особенности. Рассмотрим их на примере текстового содержимого в Pipe-стиле.

Pipe-стиль удобен, если внутри текстового содержимого нужно использовать теги. Например,

Скорее всего, при переводе в HTML, вы ожидаете следующий результат:

На самом деле получится такая разметка:

Обратите внимание на пробелы вокруг тега <button>, а точнее на их отсутствие — Pug удаляет все пробелы между элементами. В этом примере есть текст и кнопка. Поскольку это два элемента, интерпретатор удаляет пробелы между ними, так как они не несут смысловой нагрузки. Такое поведение допустимо для удаления лишних символов между тегами, но приводит к проблемам при добавлении элемента внутрь текста.

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

  1. Добавить пустую Pipe-строку, которая преобразуется в пробельный символ.
  2. Использовать HTML-мнемонику.
  3. Добавить дополнительные пробелы. Этот вариант возможен, но использовать его не стоит по причинам, о которых мы ещё поговорим.

Пустая Pipe-строка — это разновидность официального «хака» — трюка, позволяющего решить проблему. Любая Pipe-строка должна вернуть некий символ, что играет на руку разработчикам. Если сама строка пустая, то интерпретатор подставит пробельный символ. Это немного загрязняет итоговый код, но выглядит достаточно прилично, чтобы использовать такой способ. Всё, что надо сделать — добавить по пустой строке до и после элемента.

Вторым способом решения проблемы считается использование HTML-мнемоник — специальных конструкций, которые преобразуются браузером в нужные символы. Для неразрывного пробела есть символ &nbsp;. Добавив его до и после кнопки можно решить проблему отсутствующих символов.

Попробуйте добавить этот HTML-код в ваш файл и посмотрите, как браузер преобразует мнемоники в нужные символы.

Последний способ, который может помочь в примере выше — добавление отдельных пробелов в разметку Pug. Этот способ похож на использование мнемоник, только вместо них добавляется именно символ. Pug не удаляет пробельные символы внутри элемента. Если добавить тысячу пробелов между двумя словами, то интерпретатор бережно перенесёт их в разметку. Поэтому достаточно добавить пробел после фразы «Воспользуйтесь кнопкой» и перед фразой «и оставьте свои контакты». При всей работоспособности этот способ несёт несколько проблем:

  1. Такую разметку тяжело читать. Не всегда возможно сходу разобраться, сколько пробелов стоит перед строкой, а количество пробелов после строки и вовсе не видно.
  2. Большинство редакторов кода автоматически удаляют символы в конце строки, так как в них нет необходимости. В этом случае нет возможности добавить пробел после фразы «Воспользуйтесь кнопкой».

Теперь можете забыть последние два абзаца и сделать вид, что никогда о таком не слышали.

Дополнительное задание

Используя синтаксис Pug, воспроизведите следующую разметку: