关于HTML预处理器Pug的使用文档

最新推荐文章于 2024-06-14 09:46:16 发布

zzlwei

最新推荐文章于 2024-06-14 09:46:16 发布

阅读量1.2k

点赞数 3

文章标签： html

本文链接：https://blog.csdn.net/zzlwei/article/details/106996938

版权

本文详细介绍了Pug这款HTML预处理器的使用，包括标签、属性、纯文本、空格、代码、分支条件、条件、嵌入、迭代和混入（Mixin）等内容，帮助开发者快速理解和掌握Pug的语法特性。

摘要由CSDN通过智能技术生成

Pug是一款健壮、灵活、功能丰富的HTML模板引擎,专门为 Node.js 平台开发。Pug是由Jade 改名而来。

是一种通过缩进（表示标签间的嵌套关系）的方式来编写代码的过程，在编译的过程中，不需要考虑标签是否闭合的问题。可以加快写代码速度，也为代码复用提供了便捷。

在默认情况下，在每行文本的开头（或者紧跟白字符的部分）书写这个 HTML 标签的名称。使用缩进来表示标签间的嵌套关系，这样可以构建一个 HTML 代码的树状结构。

ul
  li Item A
  li Item B
  li Item C

<ul>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ul>

为了节省空间， Pug 为嵌套标签提供了一种内联式语法。

a: img

<a><img/></a>

诸如 img, meta, 和 link 之类的标签都是自动闭合的（除非您使用 XML 类型的 doctype）。您也可以通过在标签后加上 / 来明确声明此标签是自闭合的，但请您仅在明确清楚这是在做什么的情况下使用。

foo/
foo(bar='baz')/

<foo/>
<foo bar="baz" />

标签属性和 HTML 语法非常相似，但它们的值就是普通的 JavaScript 表达式。您可以用逗号作为属性分隔符，不过不加逗号也是允许的。

a(href='baidu.com') 百度
a(class='button' href='baidu.com') 百度
a(class='button', href='baidu.com') 百度

上述代码相当于

<a href="baidu.com">百度</a>
<a class="button" href="baidu.com">百度</a>
<a class="button" href="baidu.com">百度</a>

类可以使用 .classname 语法来定义

ID 可以使用 #idname 语法来定义

如果您的属性名称中含有某些奇怪的字符，并且可能会与 JavaScri

关注