Olá Web Developers! Hoje vou falar de uma ferramenta que poucos conhecem, mas que está presente em praticamente TODOS os editores de código e IDEs: o Emmet Toolkit.
A ideia principal dele é muito simples: escreva uma expressão parecida com um seletor CSS e ele vai transformar isso em elementos HTML. Assim você pode escrever bem menos e ser mais produtivo. E, claro, se você ainda não está acostumado com certos seletores do CSS, vai acabar aprendendo. Semelhantemente também há comandos para acelerar o seu CSS.
Geração simples de elementos
Se você não conhece o Emmet, é provável que em arquivos HTML já tenha percebido o seguinte: para gerar um elemento basta escrever o nome dele e pressionar Tab;
div
<!--- Após "tab" --->
<div></div>
Geração de elementos com id, classes e atributos
Da mesma forma que geramos um elemento a partir do nome dele, podemos gerar um elemento com id e classes. Basta seguir a mesma lógica de um seletor CSS.
a#meuId.classe-a.classe-b[href="https://treinaweb.com.br"]
<!--- Após "tab" --->
<a href="https://treinaweb.com.br" id="meuId" class="classe-a classe-b"></a>
Conteúdo de um elemento
Para indicar o conteúdo de um elemento, escreva entre { }.
span{Olá Web Developers}
<!--- Após "tab" --->
<span>Olá Web Developers</span>
Elementos Filhos
Por mais que os exemplos acima sejam bacanas, não economizaram tanta digitação assim. Mas daqui para frente as coisas começam a ficar mais legais.
Vimos como definir uma tag apenas. E se quisermos já indicar os elementos filhos? Para isso basta usar o >, que no CSS indica um elemento filho.
ul>li
<!--- Após "tab" --->
<ul>
<li></li>
</ul>
Algo importante a notar é que você não pode colocar espaço na declaração, como ul > li.
Curso React - Introdução
Conhecer o cursoSubir um nível
Podemos entender que o > é para descer um nível dentro do último elemento declarado. Mas, e se quisermos declarar algo que deveria ficar lá em cima, com outro elemento? Podemos usar o ^. Ele serve para indicar ao Emmet que queremos subir um nível.
Imagine que queremos uma lista com um item de lista. Mas que também queremos declarar uma div após a lista. Como já declaramos o item de lista, é preciso subir até o nível da lista novamente. Você pode colocar quantos ^ quiser.
ul>li>span^^div
<!--- Após "tab" --->
<ul>
<li><span></span></li>
</ul>
<div></div>
Use o Emmet para gerar Vários Elementos!
Sem dúvida até aqui já podemos economizar uma boa quantidade de teclas pressionadas. Mas gerar apenas um filho em um elemento não é grande coisa. Para que possamos gerar vários filhos, basta usar o * (que para o Emmet indica uma multiplicação) e indicar o número de elementos que você quer que sejam gerados.
ul>li*5
<!--- Após "tab" --->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
E, claro, você pode juntar com outras coisas que aprendemos até aqui.
ul.lista>li.item*5
<!--- Após "tab" --->
<ul class="lista">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
Variáveis dentro de um looping
Não apenas podemos gerar vários elementos com *, como também podemos utilizar o símbolo $ como uma “variável” que armazena o número do elemento.
ul.lista>li.item-${Produto $}*5
<!--- Após "tab" --->
<ul class="lista">
<li class="item-1">Produto 1</li>
<li class="item-2">Produto 2</li>
<li class="item-3">Produto 3</li>
<li class="item-4">Produto 4</li>
<li class="item-5">Produto 5</li>
</ul>
Você também pode usar vários $ caso queira que os números tenham um zero como prefixo.
ul.lista>li.item-${Produto $$$}*5
<!--- Após "tab" --->
<ul class="lista">
<li class="item-1">Produto 001</li>
<li class="item-2">Produto 002</li>
<li class="item-3">Produto 003</li>
<li class="item-4">Produto 004</li>
<li class="item-5">Produto 005</li>
</ul>
Para fazer os números virem em ordem decrescente, adicione @- após o $.
ul.lista>li.item-${Produto $$$@-}*5
<!--- Após "tab" --->
<ul class="lista">
<li class="item-1">Produto 005</li>
<li class="item-2">Produto 004</li>
<li class="item-3">Produto 003</li>
<li class="item-4">Produto 002</li>
<li class="item-5">Produto 001</li>
</ul>
Ou então, após @ coloque o número que você quer que seja o primeiro.
ul.lista>li.item-${Produto $$$@5}*5
<!--- Após "tab" --->
<ul class="lista">
<li class="item-1">Produto 005</li>
<li class="item-2">Produto 006</li>
<li class="item-3">Produto 007</li>
<li class="item-4">Produto 008</li>
<li class="item-5">Produto 009</li>
</ul>
Curso HTML5 + CSS3 - Fundamentos
Conhecer o cursoElementos Irmãos
Por mais que declarar elementos filhos seja muito útil, seria bom também poder indicar os elementos que estarão no mesmo nível do primeiro elemento declarado. E podemos fazer isso com o operador +. Assim teremos elementos gerados no mesmo nível.
div+span+div
<!--- Após "tab" --->
<div></div>
<span></span>
<div></div>
Agrupamento de Elementos
Você pode usar ( ) para agrupar elementos. Assim fica mais simples para você declarar uma árvore de elementos e depois indicar outros elementos irmãos. Bem mais simples do que ficar usando ^ para subir um nível.
div>(header>navigation)+(main>article)+(footer)
<!--- Após "tab" --->
<div>
<header>
<navigation></navigation>
</header>
<main>
<article></article>
</main>
<footer></footer>
</div>
Emmet gera automaticamente Lorem Ipsum
Talvez você já tenha visto o texto conhecido como Lorem Ipsum. Ele é muito usado para preencher sites que ainda não estão com um texto definido. Ao invés de pesquisar pelo Lorem Ipsum para copiar e colar no seu código, o próprio Emmet faz isso para você!
div>lorem
<!--- Após "tab" --->
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio repellendus laudantium sunt animi dolorum optio odit vel praesentium, atque non repellat a provident quisquam earum officia libero eos quos. Cum!</div>
Você também pode indicar um número após o comando lorem. Assim você pode controlar o tamanho do texto a ser gerado:
lorem5
<!--- Após "tab" --->
Lorem ipsum dolor sit amet.
lorem10
<!--- Após "tab" --->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, tempora!
