Emmet Abreviation: Como ser mais rápido escrevendo HTML5 .
ul>li#item$$.obj$${linha$$}*1000
Você saber como funciona essa linha no seu arquivo HTML ? Se não leia esse poster até o fim que você ira aprender, eu garanto.
introdução
Emmet é um recurso que nos permite escreve nosso código com menos linhas e com maior produtividade como o nome já diz usando abreviações para isso.
Crianças: >
Você pode use o > para aninhar a tags uma dentro da outra.
div>ul>li
output:
<div>
<ul>
<li></li>
</ul>
</div>
Irmãos: +
O operado + colocar os elementos um perto do outro, no mesmo nível.
div+p+bq
output:
<div></div>
<p></p>
<blockquote></blockquote>
Escalar: ^
Com o operador ^ você está colocando um elemento um nível abaixo em relação ao elemento anterior.
div+div>p>span+em^bq
outputs:
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
você pode usa quantos ^ você quiser, cada operado ^ colocado vai mover o elemento antecessor para baixo.
div+div>p>span+em^^^bq
output:
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
Multiplicação: *
Com * operador você pode multiplicar quantas linhas você quiser.
ul>li*5
output:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
A Grupando:( )
Parenteses são usados para agrupar sub árvores em complexas abreviações.
div>(header>ul>li*2>a)+footer>p
output:
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
Você pode aninhar grupos dentro um do outros e combinar eles com multiplicação *:
(div>dl>(dt+dd)*3)+footer>p
output:
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
Operadores Atributos
Na hora de usar o Emmet Abreviations no HTML além de colocar elementos comuns, você pode adicionar ID e Class neles diretamente quando tiver criando as abreviações.
div#header+div.page+div#footer.class1.class2.class3
output:
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
Custumizando atributos:
Você pode usar [attr] anotações (como no CSS) para adicionar atributos customizados para seus elementos.
td[title="Hello world!" colspan="3"]
output:
<td title="Hello world!" colspan="3"></td>
-
Você pode colocar quantos atributos que você quiser com colchetes.
-
Você não tem que especificar os valores dos atributos: td[colspan title] vai produzir .
-
Você não precisar colocar aspas duplas nos valores, se eles não precisam de espaços: td[title=hello colspan=3] vai produzir .
Enumerando Itens: $
Com o operador de multiplicação * você pode repete elementos, mas com $ você pode numera eles. Coloque $ operador dentro dos atributos dos elementos.
ul>li.item$*5
output:
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
Você pode usar múltiplos $ para acrescenta zeros em uma sequência.
ul>li.item$$$*5
output:
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
Se você quiser pode tentar:
ul>li#item$$$*1000 : curiosamente descobrir que o limite é até mil infelizmente como amostrado no início do artigo.
Mudando a base e a direção da enumeração:
Com @, Você pode mudar a direção da enumeração(crescente ou decrescente) e a base( começo dos valores ou seja a partir de qual número a enumeração vai começa com $)
Por exemplo, para mudar a direção(crescente ou decrescente), adicione @- depois $:
ul>li.item$@-*5
output:
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
Para mudar o contador do valor base, adicione @N para modificar $:
ul>li.item$@3*5
output:
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
Você pode usar aqueles modificadores juntos:
ul>li.item$@-3*5
output:
<ul>
<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
</ul>
Text: {}
Você pode usa colchetes para adicionar textos para os elementos:
a{Click me}
output:
<a href="">Click me</a>
Note que a{click} e a>{click} vão produzir o mesmo output, mas a{click}+b{here} e a>{click}+b{here} não vai:
<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>
Pois a>{click}+b{here} vai produzir é que todos os elementos depois do > vão ser filhos de a.
outros exemplos:
p>{Click }+a{here}+{ to continue}
output:
<p>Click <a href="">here</a> to continue</p>
Para comparação, aqui o mesmo exemplo de cima, mas sem o > operador:
p{Click }+a{here}+{ to continue}
output:
<p>Click </p>
<a href="">here</a> to continue
Notas no abbreviation formatting:
Quando você se familiariza com a sintaxe do Emmet abbreviation, você pode querer que a formatação do Emmet abbreviation fique mais legível. Por exemplo, use espaços entre elementos e operadores, como isso:
(header > ul.nav > li*5) + footer
Mas isso está errado, porque espaços são interrupções para o Emmet abbreviation. Isso é por quê Emmet necessita indicadores(como espaços), onde você pode estabelece certos limites.
Muitos usuários pesam erradamente que cada abbreviation deveria ser escrito em uma nova linha, mas eles estão errados: você pode escrever e expandir o abbreviation em qualquer lugar do texto:
Considerações finais sobre Emmet abbreviations:
-
Abbreviations não são um templete de programação, eles não devem ser "legíveis", eles tem que ser "rapidamente expansíveis e removíveis".
-
Você realmente não precisar escrever um complexo Emmet Abbreviation. Se parar para pensar tentar escrever o Emmet tudo de uma vez pode ser menos produtivo que escrever em quantidades menores.
Olá! Se esse artigo foi útil para você, por favor curta esse poste e se possível comente oque você achou, obrigado por ter lido até aqui, até próxima.
Referência: https://docs.emmet.io/abbreviations/syntax/