// mixin tạo link
mixin link(href)
	//kiểm tra nếu không có nội dung của thẻ href thì cho mặc định là 
	// javascript:void(0)
	if !href
		// attributes là thuộc tính như là class, id trong pug
		a(href="javascript:void(0)")&attributes(attributes)
			// block nghĩa là cho phép thẻ a chứa content ví dụ
			// <a href="test"><div class="abc">....</div></a> vì dùng
			// pug nên nó khác bình thường chút
			if block
				block
	else
		a(href=href)&attributes(attributes)
			if block
				block

// mixin hình ảnh
mixin img(src, alt)
	if !alt
		// nếu ko có alt thì cho rỗng, ngược lại cho bằng alt truyền vô
		img(src=src, alt="")&attributes(attributes)
	else
		img(src=src, alt=alt)&attributes(attributes)

mixin item(title, desc, src)
	.item
		h2.item-title= title
		p= desc
		img(src=src)

.wrap
	+item("haha","hehe","demo.jpg")
	+item("haha2","hehe2","demo2.jpg")
	+item("haha3","hehe3","demo3.jpg")
	// sử dụng mixin link
	+link("google.com") This is a link
	// sử dụng mixin hình ảnh
	+img("https://images.unsplash.com/photo-1538169885362-e2908f1c7c94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8589f01efc4d2c23c8ac5f50dda2f313&auto=format&fit=crop&w=634&q=80")
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.