【備忘録】pug の変数の書き方いろいろ

変数定義の時の行頭の「-（ハイフン）」は最初だけでよい

最初に「-（ハイフン）」入れて、改行＆インデントでその後は不要

pug

//-  最初知らなくてやってた面倒な書き方
- var aaa = "hoge";
- var bbb = "fuga";

//-  改行＆インデントすれば1個で済む
-
	var aaa = "hoge";
	var bbb = "fuga";

連想配列も使える

連想配列を定義したら each ... in で取り出す

pug

//-  連想配列例
-
	var obj = {
		title : 'hoge',
		description : 'fugafuga.',
		img : './hoge.jpg',
		date : '2017/12/8'
	}

//-  取り出し
//-  配列のキーと値の取り出し順が逆なのがちょっと気持ち悪い。。。
ul
	each val, key in obj
		li(class=key) !{val}

配列に入れた連想配列も使える

同じく each ... in で取り出す

ご指摘いただいてコード直しました。恥ずかしい＞＜ (2021/05/07)

pug

//-  配列に入れた連想配列
-
	var arr = [
		{
			title : 'hoge1',
			description : 'fugafuga1.',
			img : './hoge1.jpg',
			date : '2017/12/8'
		},
		{
			title : 'hoge2',
			description : 'fugafuga2.',
			img : './hoge2.jpg',
			date : '2017/12/9'
		},
		{
			title : 'hoge3',
			description : 'fugafuga3.',
			img : './hoge3.jpg',
			date : '2017/12/10'
		}
	];
//-  取り出し
ul
	each val in arr
		li
			h2 #{val.title}
			p #{val.description}
			img(src=val.img)
			p #{val.date}

mixinへの代入もできる

pug

//-  変数は上記と同じものとする

//-  mixin定義
mixin set_list(_title, _desc, _img, _date)
	li
		h2 #{_title}
		p #{_desc}
		img(src=_img)
		p #{_date}

//-  取り出し
ul
	each val in arr
		set_list(arr.title, arr.description, arr.img, arr.date)

単体で文字列として出力したい時や属性値として使う時、引数として使う時などで微妙に書き方が変わるのでよく間違える。。