JADE - Iniciando

JADE es un engine template, que nos ayuda a teclear bastante menos código HTML al hacerlo mucho más compacto y con atajos.

Básicamente funciona con identación, por lo que es super importante tener cuidado para que la anidación de tags, funcione correctamente.

El elemento por default es "div", y si no se especifica en un renglón el elemento a crear, asume que es div (como Backbone)

A un elemento, se le pueden asignar propiedades, la mayor parte de las veces seguido de paréntesis:

section(class='clase1 clase2')

También puede ser directo:

section.clase1

Si queremos ponerle un id, solo ponemos #<id> después del elemento:

section.clase1#idelemento

Y así, para todos los tags. Se le pueden pasar variables, para esto a un tag, se le pone un = y después el nombre de la variable, como por ejemplo:

title= pageTitle

En este caso al generar el HTML, se le pasan los datos y se sustituye pageTitle por el valor de esa variable.

Algunos importantes para iniciar, son:

doctype html
html
    head

Instalación (requiere Node):

sudo npm install jade -g

Para generarlo, con línea de comando (más adelante voy a ver como hacerlo con Grunt, porque esta de flojera hacerlo así cada cambio):

jade < source.jade > output.ext

Este obtiene source.jade, genera el HTML y lo deja en output.ext (por ejemplo output.html, output.hbs, etc)

Si el nombre del source es igual que el destino, salavo la extensión, entonces directo:

jade source.jade