The document describes several templating languages and preprocessors for HTML, CSS, and front-end development including Haml, Jade, LESS, SASS, and Bourbon. It provides code examples to demonstrate features like variables, nesting, mixins, imports and more. These tools can be used to make HTML, CSS, and template files more concise, reusable and maintainable.
10. doctype
html
head
title Homepage
body#home
h1 Bienvenidos
p Esto es un párrafo de texto
ul.menu
li Primer elemento
li Segundo elemento
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
</head>
<body id=“home”>
<h1>Bienvenidos</h1>
<p>Esto es un párrafo de texto</p>
<ul class='menu'>
<li>Primer elemento</li>
<li>Segundo elemento</li>
</ul>
</body>
</html>
12. layout.jade
doctype
html
head
title My Site
block script
body
block content
block footer
index.jade about-me.jade
extends layout
block script
script(src=js/app.js)
block content
h1 Bienvenidos
p Este es mi sitio
block footer
footer
p Copyright 2013
block support with extends
JADE
extends layout
block content
h1 Sobre mi
p Mi nombre es Max
p Vivo en Buenos Aires
block footer
footer
p Copyright 2013
13. layout.jade
doctype
html
head
title My Site
block script
script(src=js/jquery.js)
body
block content
article
h1 My Site
block footer
footer
p Copyright 2013
block append / prepend
JADE
extends layout
block append script
script(src=js/app.js)
block prepend content
nav
ul
li.active home.html
li about-me.html
li archive.html
index.jade