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タグで記述したい場合なども同じようにできます。

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2021年9月
 1234
567891011
12131415161718
19202122232425
2627282930