El fin de semana pasado, tuve un superplanazo de sábado tarde… ir a casa de una amigo a aprender Angular.js (como comprendereis ante esta proposición, que se quiten los findes de juergas, cines o aperitivos hasta la cena).
En fin, lo sorprendente de mis sesión de sábado fue ver a mis compañeros utilizar Sublime Text o Brackets ¡sin Emmet...! pensaba que este pluging era de los más utilizados para picar código html y css, pero ninguno de mis compañeros lo usaba. Yo desde que lo conocí, se convirtió en amor a primera vista… y editor o lugar en el trabajo lo primero que hago es instalarlo.
Para hacerlo en Sublime Text (que es editor que yo utilizo, no por que sea mejor o peor que otro, sino por que al final me resulta muy sencillo y útil a la hora precisamente de instalar cualquier tipo de pluging y que funcione realmente bien), como siempre nos iremos a Package Control: Install Package:
Y allí buscaremos Emmet:
Lo instalaremos y ya podremos volar a la hora picar nuestro código…
Lo primero a la hora de hacer un proyecto nuevo, es crearnos la estructura básica, lo haremos poniendo html:5 y pulsando tabulador… y por arte de magia nos aparecerá:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<title>Document</title>
</head>
<body>
</body>
</html>
Eso si, muy importante que Sublime Text sepa que estamos trabajando con un archivo html, bien por que lo hayamos guardado previamente con esta extensión, o bien porque hayamos definido nuestro tipo de código en la parte inferior de la ventana.
Para ir agregando etiquetas, podremos ir poniendo el nombre la etiqueta sin signos <> y pulsar de nuevo tabulador (Tab).
<!DOCTYPE html><html lang=”en”> <head> <meta charset=”UTF-8”> <title>Document</title> </head> <body>header (y pulsamos tabulador)</body> </html> y obtendremos<!DOCTYPE html><html lang=”en”> <head> <meta charset=”UTF-8”> <title>Document</title> </head> <body><header></header></body> </html>
Bien hasta aquí pensarais que esto no es suficiente para que merezca la pena instalar este pluging. Bueno ahora vamos a crearnos un menú dentro del header:
<header>nav#menuPrincipal>ul.menu>li*3>a{Item $}</header>
y “voila”
aquí tenemos el resultado:
<nav id=”menuPrincipal”> <ul class=”menu”> <li><a href=””>Item 1</a></li> <li><a href=””>Item 2</a></li> <li><a href=””>Item 3</a></li> </ul> </nav>
Si analizamos nuestro código vemos que vamos poniendo todas nuestras etiquetas seguidas y podemos ir anidando unas dentro de otras gracias al símbolo > (ejemplo nav>ul> nos creará un ul dentro del nav).
Por otro lado podemos añadirle clases o ids a nuestras etiquetas directamente (nav#menuPrincipal estaremos diciendo a nuestro nav que queremos que tenga el id menuPrincipal).
Podemos también multiplicar el número de etiquetas (li*3 nos creará tres etiquetas li dentro del ul).
Por último dentro de nuestro li vamos a anidar en cada uno de ellos un enlace con la etiqueta a y cada una de ellas va a tener anidado el texto Item $ (para que lo añada a cada etiquete lo tenemos que poner entre {} y añadiendo el # lo que conseguimos es que nos lo numere.
¡Fantástico!
Continuemos construyendo nuestra página web… después del header podemos añadir lo siguiente:
section>article*3>h3>lorem5^p>lorem
Al pulsar tabulador veremos los siguiente:
<section> <article> <h3>Lorem ipsum dolor sit amet.</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis totam maiores, odio illum vero deserunt reprehenderit commodi dicta iste sapiente repellendus eligendi, possimus sit cum nemo mollitia a quisquam? Eligendi.</p> </article> <article> <h3>Culpa incidunt ullam praesentium dolore.</h3> <p>Quidem perferendis fugiat inventore pariatur, omnis, odit! Sequi voluptatem cum blanditiis. Et laudantium quis sed officiis voluptate obcaecati similique cupiditate reiciendis tempore harum tenetur, saepe, sunt. Recusandae, laboriosam voluptates vero?</p> </article> <article> <h3>Culpa incidunt ullam praesentium dolore.</h3> <p>Quidem perferendis fugiat inventore pariatur, omnis, odit! Sequi voluptatem cum blanditiis. Et laudantium quis sed officiis voluptate obcaecati similique cupiditate reiciendis tempore harum tenetur, saepe, sunt. Recusandae, laboriosam voluptates vero?</p> </article> </section>
En principio es bastante similar a lo anterior, vemos sólo las novedades:
Con lorem5 lo que hacemos es crearnos un texto lorem ipsum de sólo 5 palabras. Sin embargo en p>lorem creará lo que viene por defecto en Emmet que son 30.
la principal novedad es si queremos crar un elemento hermano a otros (en lugar de hijo como hemos hecho hasta ahora con >), pues lo haremos con ^ (ejemplo h3^p).
Bueno sólo deciros que tenéis toda documentación en su página: emmet.io
Resumen de los operadores:
- > crea elementos hijo
- + Crea elementos hermanos
- ^ se puede subir un nivel por encima
- * nos permite multiplicar el numero de elementos definidos
- () para agrupar un numero de operaciones de elementos dentro de otro elemento. Ejemplo: div >(header>ul>li* 2 >a)+footer>p
- # añade id a nuestra etiqueta
- . añade la clase a nuestro etiqueta
- [attr] podemos personalizar los atributos de una etiqueta (ejemplo: td[title= “Hello world!” colspan= 3 ] resultaría < td title = “Hello world!” colspan = “3” > </ td >)
- $ Con la multiplicación * podemos repetir elementos, pero con $ podemos numerarlos
- {} nos permite añadir texto a una etiqueta
Es importante nunca dejar espacios dentro de la sintaxis de Emmet, ya que eso lo identifica como un simbolo de detención y no realizará las operaciones anteriores al espacio.
interesante