Edited at

Pug - extends/blockで id/class に変数を使う記述方法 / How to use Variable to id/class with extends/block in Pug

More than 1 year has passed since last update.

最近 Pug / Sass を本格的に使い出しました。

コードを書きやすくなり読みやすくなり、とても気に入ってます。

そこで行き着いたのは、

extends による継承と変数を使い、柔軟なコーディングがしたいと思い、わりと正解を見つけるのに苦労しました。

Jadeでは使えたらしい # が使えず、$ (ES2015記法) のみ使えるようになっていました。

しかしこの方法を見つけたおかげで、クールなコーディングが書けそうで嬉しいです。

Recently I start to use Pug / Sass.

It makes code easier to write and easy to read, I like it very much.

Then I arrived there,

Using inheritance and variables with extends, I wanted flexible coding, then I had a hard time finding the right answer.

I had a hard time finding the right answer.

Jade seemed to be able to use # cannot be used, only $ (ES2015 Notation) is available.

However, thanks to finding this method, I am glad that I can write cool coding.


version

$ pug --version

pug version: 2.0.3
pug-cli version: 1.0.0-alpha6

$ node --version
v8.11.2


example


_layout.pug

block var_article

main(id=main_id)



index.pug

extends _layout.pug

block var_article

- var main_id = 'id20180602'



index.html

  <main id="id20180602">



kinds

HOW TO WRITE
RESULT

main(id=main_id)

main(id=`${main_id}`)

main(id=`#{main_id}`)
× <main id="#{main_id}">

main#{main_id}
× (Error)

main#${main_id}
× (Error)


ref