サイト内のページURLリストをHTMLで作る場合など、サイト構築とは別でそのページのみCSSを使いたいということがあったので、Pug内で直接styleタグを記述する方法をメモ。
サンプルコード
styleの末尾に「.」をつけることで、以降通常通りのCSSの書き方で記述できます。
1 2 3 4 5 6 7 8 9 10 11 12 | 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; } |
以下のようにコンパイルされました。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <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タグで記述したい場合なども同じようにできます。
コメントが承認されるまで時間がかかります。