pugでstyleタグを直接記述する

サイト内のページURLリストをHTMLで作る場合など、サイト構築とは別でそのページのみCSSを使いたいということがあったので、Pug内で直接styleタグを記述する方法をメモ。

サンプルコード

styleの末尾に「.」をつけることで、以降通常通りのCSSの書き方で記述できます。

style(type="text/css").
  .pagelist {
    width: 80%;
    margin: 5em auto;
    border: #000 1px solid;
    padding: 5%;
  }
  .pagelist li {
    list-style-type: disc;
    list-style-position: outside;
    margin-bottom: 2em;
  }

以下のようにコンパイルされました。

<style type="text/css">
  .pagelist {
    width: 80%;
    margin: 5em auto;
    border: #000 1px solid;
    padding: 5%;
  }
  .pagelist li {
    list-style-type: disc;
    list-style-position: outside;
    margin-bottom: 2em;
  }
</style>

今回はstypeタグで試しましたが、scriptタグで記述したい場合なども同じようにできます。