Reparación Samsung galaxy S2
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.
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 >
