Jade: Criando Blocos Reutilizáveis com Mixins

Os benefícios da modularização já foram amplamente estudados na Engenharia de Software, e não são o foco deste artigo. Nele explicarei apenas o que for relevante do ponto de vista da implementação. Caso esteja interessado, consulte também a documentação oficial (em inglês) sobre como implementar herança de views.

Todos os exemplos utilizados neste artigo foram retirados da documentação oficial (em inglês).

Mixins

Mixins são blocos reutilizáveis de código, permitindo uma melhor organização de nossas views.

Primeiramente, vejamos um exemplo simples, que ilustra a declaração e o uso de mixins.

O código Jade abaixo

gera o HTML

Simples, não? O mixin list pode ser utilizado em qualquer arquivo .jade, desde que o arquivo de sua declaração seja devidamente incluído.

Passagem de parâmetros

Vejamos, agora, um exemplo um pouco mais útil, em que o mixin recebe parâmetros para gerar saídas customizadas.

gera o HTML

Blocos

Além disso, mixins podem receber blocos como parâmetro, para produzirem parte da (ou toda a) saída.

gera o HTML

Atributos Nomeados

Também é possível utilizar atributos nomeados, como mostra o exemplo abaixo.

produzindo o HTML

Por padrão, os atributos são escapados durante a chamada da função. Assim, eles devem ser utilizados no mixin em conjunto com o operador !, para evitar que sejam escapados duas vezes.

Número Deconhecido de Parâmetros

Por fim, ainda é possível utilizar mixins que recebam um número desconhecido de parâmetros.

O código Jade abaixo

produz o HTML

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *