Emmet en Sublime Text 3.

En este video podremos ver como funciona el plugins Emmet. Dejo un pequeño resumen de la traducción de la documentación emmet.

Elementos

Puede usar nombres de elementos como div o p para generar etiquetas HTML. Emmet no tiene un conjunto predefinido de nombres de etiquetas disponibles, puede escribir cualquier palabra y transformarla en una etiqueta: div → <div></div> , foo → <foo></foo> y así sucesivamente.

Operadores de anidamiento

Los operadores de anidamiento se utilizan para ubicar los elementos de abreviatura dentro del árbol generado: si debe colocarse dentro o cerca del elemento de contexto.

Puede usar > operador para anidar elementos uno dentro del otro:

div>ul>li 

El resultado sera:

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

El operador + para colocar elementos cerca uno del otro, en el mismo nivel:

div + p + bq

El resultado sera:

<div> </div> 
<p> </p> 
<blockquote> </blockquote> 


Con el operador  > desciende por el árbol generado y las posiciones de todos los elementos hermanos se resolverán contra el elemento más profundo: 

div+div>p>span+em

El resultado sera:

 <div> </div> <div> <p> <span> </span> <em> </em> </p> </div> 

Con ^ operador, puede subir un nivel por el árbol y cambiar el contexto donde deberían aparecer los siguientes elementos: 

div + div >p>span+em^bq

El resultado sera:

 <div> </div> <div> <p> <span> </span> <em> </em> </p> <blockquote> </blockquote> </div> 

Puede usar tantos operadores ^ como quiera, cada operador subirá un nivel:

El resultado sera:

<div> </div> <div> <p> <span> </span> <em> </em> </p> </div> <blockquote> </blockquote>

Multiplicación: *

Con * operador puede definir cuántas veces se debe generar el elemento:

ul>li*5

El resultado sera:

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

Agrupación: ()

Los usuarios avanzados de Emmets utilizan paréntesis para agrupar subárboles en abreviaturas complejas:

div >(header>ul>li* 2 >a)+footer>p

... se expande a

<div> <header> <ul> <li> <a href=""> </a> </li> <li> <a href=""> </a> </li> </ul> </header> <footer> <p> </p> </footer> </div>

Si está trabajando con el DOM del navegador, puede pensar en grupos como Fragmentos de documento: cada grupo contiene un subárbol de abreviatura y todos los elementos siguientes se insertan en el mismo nivel que el primer elemento del grupo.

Puede anidar grupos dentro de cada uno y combinarlos con el operador de multiplicación * :

( div>dl> ( dt+dd ) *3)+footer>p

El resultado sera:

< div > < dl > < dt > </ dt > < dd > </ dd > < dt > </ dt > < dd > </ dd > < dt > </ dt > < dd > </ dd > </ dl > </ div > < footer > < p > </ p > </ footer >

Con grupos, literalmente puede escribir el marcado de página completa con una sola abreviatura, pero no haga eso.

Operadores de atributos

Los operadores de atributos se usan para modificar los atributos de los elementos generados. Por ejemplo, en HTML y XML puede agregar rápidamente class atributo de class al elemento generado.

ID y CLASE

En CSS, utiliza la notación elem#id y elem.class para llegar a los elementos con los atributos de id o class especificados. En Emmet, puede usar la misma sintaxis para agregar estos atributos al elemento especificado:

div #header+ div .page+ div #footer.class1.class2.class3

... saldrá

<div id="header"></div>

<div class="page"></div>

<div id="footer" class="class1 class2 class3"></div>

Numeración de artículos: $

Con el operador de multiplicación * puede repetir elementos, pero con $ puede numerarlos. Coloque $ operator dentro del nombre del elemento, el nombre del atributo o el valor del atributo para dar salida al número actual de elementos repetidos:

ul>li.item $* 5

... salidas a

< ul > < li class = "item1" > </ li > < li class = "item2" > </ li > < li class = "item3" > </ li > < li class = "item4" > </ li > < li class = "item5" > </ li > </ ul >

Puede usar varios $ en una fila para rellenar el número con ceros:

ul>li.item $$ $* 5

El resultado sera:

< ul > < li class = "item001" > </ li > < li class = "item002" > </ li > < li class = "item003" > </ li > < li class = "item004" > </ li > < li class = "item005" > </ li > </ ul >

Cambiar la base y la dirección de numeración

Con el modificador @ , puede cambiar la dirección de numeración (ascendente o descendente) y la base (p. Ej., Valor de inicio).

Por ejemplo, para cambiar la dirección, agregue @- después de $ :

ul>li.item $@ - *5

El resultado sera:

< ul > < li class = "item5" > </ li > < li class = "item4" > </ li > < li class = "item3" > </ li > < li class = "item2" > </ li > < li class = "item1" > </ li > </ ul >

Para cambiar el valor base del contador, agregue el modificador @N a $ :

ul>li.item $@ 3 *5

... se transforma a

< ul > < li class = "item3" > </ li > < li class = "item4" > </ li > < li class = "item5" > </ li > < li class = "item6" > </ li > < li class = "item7" > </ li > </ ul >

Puedes usar estos modificadores juntos:

ul>li.item $@ - 3 *5

... se transforma a

< ul > < li class = "item7" > </ li > < li class = "item6" > </ li > < li class = "item5" > </ li > < li class = "item4" > </ li > < li class = "item3" > </ li > </ ul >

Texto: {}

Puede usar llaves para agregar texto al elemento:

a{Click me}

...Producirá

< a href = "" > Click me </ a >

Tenga en cuenta que {text} se usa y se analiza como un elemento separado (como, div , p , etc.) pero tiene un significado especial cuando se escribe justo después del elemento. Por ejemplo, a{click} y a>{click} producirán el mismo resultado, pero a{click}+b{here} y a>{click}+b{here} no:

<!-- a{click}+b{here} --> < a href = "" > click </ a > < b > here </ b > <!-- a>{click}+b{here} --> < a href = "" > click < b > here </ b > </ a >

En el segundo ejemplo, el elemento <b> se coloca dentro del elemento <a> . Y esa es la diferencia: cuando {text} se escribe justo después del elemento, no cambia el contexto principal. Aquí hay un ejemplo más complejo que muestra por qué es importante:

p>{Click }+a{here}+{ to continue }

... produce

< p > Click < a href = "" > here </ a > to continue </ p >

En este ejemplo, para escribir Click here to continue dentro del elemento <p> , hemos movido explícitamente el árbol con el operador > después de p , pero en el caso de a elemento no tenemos que hacerlo, ya que necesitamos <a> elemento con here solo palabra, sin cambiar el contexto principal.

Para la comparación, aquí está la misma abreviatura escrita sin child > operador:

p{Click }+a{here}+{ to continue }

... produce

< p > Click </ p > < a href = "" > here </ a > to continue

"Lorem ipsum"

Puede usar el generador lorem dentro de elementos repetidos para crear etiquetas llenas de oraciones completamente aleatorias.

p*4>lorem

< p > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus! </ p > < p > Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam! </ p > < p > Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at! </ p > < p > Consequatur rerum amet fuga expedita sunt et tempora saepe? Iusto nihil explicabo perferendis quos provident delectus ducimus necessitatibus reiciendis optio tempora unde earum doloremque commodi laudantium ad nulla vel odio? </ p >