如何在 Pug 中使用样式元素

在 Pug 中使用样式元素有两种方式：使用 style 标签和使用外部文件链接样式。

使用 style 标签

可以在你的 Pug 文件中使用 style 标签来添加内联样式。例如：

html
  head
    style.
      body {
        font-size: 16px;
        color: #333;
      }

  body
    p This is some text.

上面的例子在 head 元素中添加了一个 style 标签，其中包含了一些 CSS 样式规则。这些样式规则会应用到整个 body 元素。

使用外部文件链接样式

另一种在 Pug 中使用样式元素的方式是将样式规则放在外部 CSS 文件中，然后在 Pug 文件中链接它们。例如：

html
  head
    link(rel="stylesheet" href="styles.css")

  body
    p This is some text.

上面的例子在 head 元素中添加了一个 link 标签，并将 href 属性设置为要链接的 CSS 文件的路径。这个 CSS 文件名为 styles.css。

可以在 CSS 文件中添加任何你想要的样式规则，它们会被应用到 Pug 文件中相应的元素上。

以上是在 Pug 中使用样式元素的两种方式。使用哪种方式取决于你的具体需求。如果需要在一个较小的范围内应用样式，可以使用 style 标签；如果想要在整个网站中应用样式，可以使用外部文件链接样式。