Executando verificação de segurança...
4
arthurcant
5 min de leitura ·

Emmet Abreviation: Como ser mais rápido escrevendo HTML5 .

texto

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:

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/

Carregando publicação patrocinada...