Documentación Emmet

Volver al sitio web principal

Tu nueva carrera de
desarrollo te espera.
Echa un vistazo a los
últimos listados.

anuncios a través de
Carbon

abreviaturas
Sintaxis
Tipos de elementos
Nombres de etiquetas implícitos
Generador “Lorem Ipsum”

Abreviaturas CSS
Prefijos de proveedores
Gradientes
Búsqueda borrosa

Comportamiento
Expandir abreviatura
Equilibrio
Ir a Par coincidente
Envolver con abreviatura
Ir a Editar punto
Seleccione un artículo
Alternar comentario
Etiqueta de división/unión
Remover etiqueta
Combinar líneas
Actualizar tamaño de imagen
Evaluar expresión matemática
Número de incremento/decremento
Reflejar valor CSS
Codificar/Decodificar imagen a datos:URL

filtros
Yandex BEM/OOCSS

personalización
 fragmentos.json
preferencias.json
syntaxProfiles.json

Hoja de trucos

Más herramientas para desarrolladores:

Estilo de vida de Emmet

Herramienta de edición bidireccional en tiempo real para CSS, LESS y SCSS.

Emmet Re: ver

Una forma rápida y fácil de probar el diseño receptivo en paralelo.

¶ Tipos de elementos
en documentos HTML y XML, cuando expande abreviaturas, todas las partes de la
abreviatura se transforman sobre la marcha en etiquetas HTML/XML. Pero ciertos
elementos como ao imgse transforman en elementos con atributos predefinidos: <a
href=""></a>y <img src="" alt="" />. ¿Cómo sabe Emmet cuándo agregar esos
atributos?

Todas las definiciones de elementos de Emmet se almacenan en el archivo snippets.json

en el siguiente formato:

"html": {

"abbreviations": {

"a": "<a href=\"\">",

"link": "<link rel=\"stylesheet\" href=\"\" />"

...

},

"snippets": {

"cc:ie6": "<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->"

...

},

"css": {

...

Como puede ver, en el primer nivel hay nombres de sintaxis para los cuales se definen
los elementos. Dentro de la sección de sintaxis hay definiciones de elementos divididas
en dos secciones: fragmentos y abreviaturas .

fragmentos
Los fragmentos son solo bloques de código sin formato, como en los editores de todos los
programadores. Puede escribir cualquier cosa allí y se generará "tal cual", sin ninguna
transformación.

abreviaturas
Las abreviaturas son en realidad bloques de construcción con algunas sugerencias de
datos. Dado que Emmet se usa principalmente para escribir etiquetas HTML/XML, la
definición de abreviatura usa el formato XML para describir el elemento .

Emmet analiza la definición de la abreviatura y recupera los siguientes datos:

nombre del elemento;

atributos predeterminados;
orden de los atributos;
valores por defecto de los atributos;
el elemento debe contener una etiqueta de cierre.

Echemos un vistazo más de cerca a las definiciones de abreviaturas HTML anteriores. El

linkelemento se define como <link rel="stylesheet" href="" />(las comillas
dobles se deben escapar en JSON; o usar comillas simples en su lugar). Esta definición
dice que la etiqueta, generada para la linkabreviatura, debe llamarse enlace y debe
contener dos atributos: rel con valor predeterminado "hoja de estilo" y href con valor vacío
(exactamente en este orden), y el elemento generado no debe contener la etiqueta de
cierre.

Cuando linkse expanda la abreviatura, recibirá el siguiente resultado para la sintaxis

HTML:

<link rel="stylesheet" href="">

Puede anular los valores de atributo predeterminados y agregar otros nuevos también:

link[rel=prefetch title="Hello world"]

... se expande a
 <link rel="prefetch" href="" title="Hello world">

También puede agregar elementos secundarios, lo que obliga a Emmet a generar una
etiqueta de cierre:

link>xsl:apply-templates

... dará salida

<link rel="stylesheet" href="">

<xsl:apply-templates></xsl:apply-templates>

</link>

Alias
En la sección de abreviaturas snippets.jsontambién puede definir alias : una forma
abreviada de abreviaturas de uso común. Los alias se pueden utilizar para definir:

nombres cortos para nombres largos de etiquetas;

haciendo referencia a abreviaturas de uso común.

En snippets.jsonel archivo, se pueden encontrar las siguientes definiciones:

...

"html": {

"abbreviations": {

"bq": "blockquote",

"ol+": "ol>li"

En el ejemplo anterior, cuando expande la bqabreviatura, Emmet buscará blockquotela

definición de la abreviatura. Si no existe, simplemente generará un <blockquote>
</blockquote>elemento. La ol+abreviatura en realidad genera el mismo resultado que
ol>lihace.

La ol+definición puede parecer ambigua ya que contiene +al final que también es un
operador hermano. Emmet expande correctamente tales abreviaturas y el signo más se
deja aquí por razones históricas. Solo recuerde que no necesita usar el signo más para
crear un alias de abreviatura.

comentarios impulsados ​por Disqus

Soporte: info@emmet.io

Creado con DocPad y Gulp.js

Tema mínimo por lista ordenada

Ver código fuente de la página en GitHub