Jade — это препроцессор HTML, способный существенно упростить и ускорить верстку веб-страниц. У него отличная документация, описывающая все особенности работы.
В этой статье разберем самые основы синтаксиса Jade.

Документация и статьи по Jade

Документация и статьи по Pug

Pug — тот же Jade, только в профиль. Переименование произошло по юридическим причинам, но суть осталась прежней.

Файлы jade имеют расширение .jade.

Основы синтаксиса

Писать код на Jade намного проще и быстрее, чем обычный HTML. Просто сравните:

В чем же разница?

  1. Никаких угловых скобок, используются только названия тегов
  2. Никаких закрывающих тегов
  3. Вложенность тегов обозначается табуляцией
  4. Классы элемента пишутся через точку, идентификаторы через решетку, как в Emmet.
  5. Атрибуты тега записываются в скобках, разделенные запятыми или просто пробелом
  6. Содержимое тега пишется сразу после него через пробел.

Теги

Первое слово на каждой строке Jade воспринимает как тег, остальные — как текст.

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

Вложенность обозначается табуляцией, то есть вложенный (дочерний) тег пишется под своим родителем с отступом. Кроме того, можно обозначать вложенность таким способом:

Содержимое тегов

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

Это не нужно делать для тегов, которые по определению не могут содержать в себе других тегов, например, script или style.

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

Знак точки после тега означает, что весь следующий текст располагается внутри этого абзаца. Точка при этом следует сразу после тега, без пробела. В ином случае знак будет восприниматься просто как содержимое тега.
[context]

Атрибуты тегов

Классы и идентификаторы элементов указываются с помощью знаков точки и решетки:

Кстати, тег div можно опускать, он подразумевается по умолчанию:

Объявление классов и модификаторов можно совмещать:

Jade позволяет передавать в атрибут class массив значений:

В первой строке объявлен массив bodyClasses с помощью специального синтаксиса Jade для выделения небуферизируемого кода. Читать подробнее о возможностях Jade

Атрибуты тегов указываются в круглых скобках. Пары название атрибута — значение разделяются запятыми или просто пробелом:

Внутри скобок можно переносить атрибуты на другую строку, добавлять отступы для удобства:

В атрибут style может быть передан объект

Атрибуты тегу могут добавляться также с помощью выражения &attributes, которое позволяет внедрить объект, содержащий атрибуты в виде название:значение. Читать подробнее о возможностях Jade

Комментарии

Для выделения комментариев в jade используются два слеша. Текст комментария должен располагаться на той же строке для однострочных комментариев или отделяться табуляцией для многострочных.

Такие комментарии будут отражаться в скомпилированном коде. Если необходимо создать небуферизируемый комментарий, нужно после двух слешей добавить символ дефиса //-
Условные комментарии также поддерживаются:

DOCTYPE

Стандартное указание доктайпа для html5 — doctype html (нечувствителен к регистру букв).
Другие часто используемые доктайпы:
doctype xml, doctype transitional, doctype strict, doctype frameset, doctype 1.1, doctype basic, doctype mobile.


Вам будет интересно:

Возможности Jade
Шаблонизация в Jade

3 комментария

  • Павел
    Павел
    22/01/2017, 13:44
    Подскажите, как с помощью Jade создать такую конструкцию Иван Иваныч miilafon.ru 2017г. Благодарю)
    • Павел
      Павел
      22/01/2017, 13:44
      Имею ввиду - ссылку внутри парагафа p
      • Furry_web
        Furry_web
        27/01/2017, 14:38
        Если я вас правильно поняла, то вот так:
        p Иван Иваныч 
            a(href = "site.ru")  miilafon.ru
            |2017г.
        обязательно табуляция, так как ссылка лежит внутри абзаца, а чтобы обозначить, что остаток текста на том же уровне, используем вертикальную черту. или так:
        p Иван Иваныч #[a(href="site.ru") miilafon.ru] 2017г.

Оставить комментарий

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован