Pruebas con Emmet

Emmet es un complemento que se encuentra disponible en las principales aplicaciones para escribir código, y que permite una escritura mucho más rápida de lo habitual mediante el uso de abreviaturas y expresiones para generar patrones de código. Su uso es indispensable para cualquier desarrollador, y es muy sencillo de manejar, obteniendo grandes resultados desde el primer momento.

Vamos a ver un ejemplo de uso de las expresiones más habituales en Emmet.

Uso básico.

Al escribir en Emmet:

p{Estos párrafos muestran el mismo texto, pero no están copiados y pegados. Inserté las etiquetas usando la expresión de emmet: p*3}*3

Obtenemos:

Estos párrafos muestran el mismo texto, pero no están copiados y pegados. Inserté las etiquetas usando la expresión de emmet: p*3

Elementos anidados

Si queremos indicar que un elemento está anidado dentro de otro usamos el carácter >. Por ejemplo, la expresión header>h1 nos construye esto: <header><h1></h1></header>

Si escribimos ul>li*5, obtenemos:


				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>

Contenido de etiquetas

Si queremos añadir contenido a alguna etiqueta usamos las llaves {} a continuación de la etiqueta.
La expresión ul>li{Elemento}*5 devuelve:


		<ul>
			<li>Elemento</li>
			<li>Elemento</li>
			<li>Elemento</li>
			<li>Elemento</li>
			<li>Elemento</li>
		</ul>

Iteración de repeticiones

También podemos usar el signo de dólar $ como variable numeral de las repeticiones que indiquemos.
La expresión ul>li{Elemento $}*5 devuelve:


			<ul>
				<li>Elemento 1</li>
				<li>Elemento 2</li>
				<li>Elemento 3</li>
				<li>Elemento 4</li>
				<li>Elemento 5</li>
			</ul>

Clases e id

Si queremos asignar una clase o un id a un elemento, usamos la expresión etiqueta.nombre_de_clase o eitqueta#nombre_id.
La expresión div.contenedor>header#cab_home.portada nos devuelve:


			<div class="contenedor">
				<header id="cab_home" class="portada"></header>
			</div>

Concatenación de etiquetas

El operador + permite colocar etiquetas una al lado de la otra.
La expresión div.contenedor>header.cabecera+section.contenido+footer.pie devuelve:


		<div class="contenedor">
			<header class="cabecera"></header>
			<section class="contenido"></section>
			<footer class="pie"></footer>
		</div>

Otras expresiones

También podemos usar

(): Para agrupar etiquetas en la expresión
^: Para subir un nivel en la jerarquía de la expresión
[]:Para definir atributos dentro de las etiquetas

Ejemplo

El siguiente código nos muestra:

div.contenedor>header.cabecera>h1{Cabecera del sitio}+img.logo[title="Imagen de cabecera del sitio"]+nav>ul.menu>(li.list-menu>a{Enlace $})*5^^+h2.lema{Mi lema del sitio}^+section.principal>article.noticia*5^+footer.pie

				
			<div class="contenedor">
				<header class="cabecera">
					<h1>Cabecera del sitio</h1>
					<img src="" alt="" class="logo" title="Imagen de cabecera del sitio">
					<nav>
						<ul class="menu">
							<li class="list-menu"><a href="">Enlace 1</a></li>
							<li class="list-menu"><a href="">Enlace 2</a></li>
							<li class="list-menu"><a href="">Enlace 3</a></li>
							<li class="list-menu"><a href="">Enlace 4</a></li>
							<li class="list-menu"><a href="">Enlace 5</a></li>
						</ul>
					</nav>
					<h2 class="lema">Mi lema del sitio</h2>
				</header>
				<section class="principal">
					<article class="noticia"></article>
					<article class="noticia"></article>
					<article class="noticia"></article>
					<article class="noticia"></article>
					<article class="noticia"></article>
				</section>
				<footer class="pie"></footer>
			</div>

Probando las funciones de EMMET