Как лучше написать mixin в jade для иконок?

Question

[Кира]

Здравствуйте.
Вот начинаю изучать Jade и возник такой вопрос. Есть подобная структура из иконок font awesome. Конструкция громоздкая и мне кажется, что её нужно оформить в миксин, но как это грамотно сделать я не могу догадаться. Или может вообще не миксин, а что-нибудь другое?

.social-icons
	span.fa-stack.fa-lg
		i.fa.fa-circle-thin.fa-stack-2x
		i.fa.fa-facebook.fa-stack-1x
	span.fa-stack.fa-lg
		i.fa.fa-circle-thin.fa-stack-2x
		i.fa.fa-google-plus.fa-stack-1x
	span.fa-stack.fa-lg
		i.fa.fa-circle-thin.fa-stack-2x
		i.fa.fa-twitter.fa-stack-1x
	span.fa-stack.fa-lg
		i.fa.fa-circle-thin.fa-stack-2x
		i.fa.fa-linkedin.fa-stack-1x

Answer 1

[Константин Величко]

mixin fa-stack(data)
	span.fa-stack.fa-lg&attributes(attributes)
		block

mixin fa-icon(data)
	i.fa&attributes(attributes)

+fa-stack()
	+fa-icon().fa-circle-thin.fa-stack-2x
	+fa-icon().fa-facebook.fa-stack-1x

или так

mixin fa-stack(data)
	span.fa-stack.fa-lg&attributes(attributes)
		block

mixin fa-icon(data)
	- var classList = ['fa']

	if attributes.icon
		- classList.push(classList[0] + '-' + attributes.icon)
		
	if attributes.stack
		- classList.push(classList[0] + '-stack-' + attributes.stack)

	i(class=classList)


+fa-stack()
	+fa-icon(icon="circle-thin" stack="2x")
	+fa-icon(icon="facebook" stack="1x")

Comments

[Кира]

Спасибо!