下述代码属于哪种HTML相关模板语法？该语法是否被广泛使用？

所属模板语法 #

你贴的代码是Pug（旧称Jade）的模板语法，这是一款面向HTML生成的缩进式模板语言，靠缩进来表示DOM节点的嵌套关系，省略了原生HTML的尖括号和闭合标签，还内置了混入（mixin）、变量插值、逻辑判断等扩展能力。你代码里的mixin定义可复用组件、+input调用混入、.input-container直接声明带class的div元素，都是Pug的标志性语法。

对应代码片段：

// Mixins
mixin input(type, label)
  .input-container
    input(type='#{type}' id='#{label}' required)
    label(for='#{label}')=label
    .bar
mixin button(text)
  .button-container
    button
      span=text

// Pen Title
.pen-title
  h1 Material Login Form
  span
    | Pen <i class='fa fa-code'></i> by <a href='http://andytran.me'>Andy Tran</a>
    
.rerun
  a(href='') Rerun Pen
  
.container
  .card
  .card
    h1.title Login
    form
      +input('text', 'Username')
      +input('password', 'Password')
      +button('Go')
      .footer
        a(href='#') Forgot your password?
  .card.alt
    .toggle
    h1.title Register
      .close
    form

应用普及度 #

Pug目前不属于前端领域广泛使用的主流模板方案，使用场景比较受限：

• 它是Node.js生态早期的热门模板引擎，现在还是Express等Node服务端框架的官方可选模板，不少存量的Node服务端渲染项目还在使用
• 部分静态站点生成工具也支持Pug作为可选模板配置
• 但在当前前后端分离的主流开发模式下，React的JSX、Vue的单文件组件模板等框架原生语法占据了绝大多数市场，新启动的项目很少会单独选择Pug作为模板方案，仅在存量项目维护、特定工具链需求场景下才会用到。

内容的提问来源于stack exchange，提问作者Amirmasoud