Pug es un motor de plantillas enfocado en hacer más rápida la codificación de HTML. Es implementado con JavaScript para Node.js y navegadores. La sintaxis de pug se basa en trabajar por indentación como Python lo hace.
Pug era conocido anteriormente con el nombre de Jade, pero se le cambió el nombre debido a un caso de marca registrada.
Como en cualquier otro lenguaje empecemos por un ¡Hola Mundo!, te preguntarás ¿cómo se escribe esto? pues veamos la sintaxis.
p Hello World
Lo que el preprocesador traduciría a lenguaje HTML como:
<p>Hello World</p>
La sintaxis de pug es muy sencilla y nos ahorra escritura de código, por lo que podríamos escribir más código en menos tiempo. En VSCode los archivos .pug soportan la escritura con EMMET.
Es importante indicar que Pug tiene dos opciones para comentarios ya que uno de ellos será visible también en el HTML y otro sólo quedará en el archivo de pug.
Comentario en HTML y Pug.
// Soy un comentario en pug, que será visible en tu HTML.
Comentario exclusivo de Pug.
//- Soy un comentario que sólo será visible en el archivo de pug.
Ahora sí veamos las funcionalidades que nos ofrece trabajar con Pug para nuestro código HTML.
La sintaxis dentro de Pug es bastante sencilla, hace uso de la indentación para definir cuales son los elementos padres y cuales son los elementos hijos.
<!DOCTYPE html>
html(lang="es")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title Document
link(rel="stylesheet", href="css/ejercicio-pug.css")
body
header
h1 Titular
a.boton(href="#") Registro
main
p Lorem ipsum, dolor sit amet consectetur adipisicing elit.
footer
p Todos los derechos reservados ©
El código anterior es un ejemplo de una página que tiene dentro del body secciones de header, main y footer. Lo anterior en código HTML sería la estructra básica que conocemos.
Cuando el elemento padre en Pug tiene un único hijo lo podemos declarar de la siguiente forma sin necesidad de indentar los elementos.
main
.intro__imagen: img(src="images/imagen.png", alt="")
Lo que estamos indicando en el código anterior es que dentro de la etiqueta main tendremos un div con las clase .intro_image que a su vez contendrá al elemento img.
Sí, Pug tiene variables y son muy útiles a la hora de hacer nuestro código mantenible. La forma de declarar las variables es la siguiente.