{"id":3292,"date":"2014-12-23T10:51:13","date_gmt":"2014-12-23T12:51:13","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=3292"},"modified":"2014-12-23T10:51:13","modified_gmt":"2014-12-23T12:51:13","slug":"pre-processadores-html","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/html\/pre-processadores-html","title":{"rendered":"Pr\u00e9-processadores HTML"},"content":{"rendered":"

Escrever c\u00f3digo HTML \u00e9 de certa forma uma tarefa cansativa. Um exemplo \u00e9 o fechamento de tags tais como div<\/em>, strong<\/em>, ul<\/em>, li<\/em>…, tarefa relativamente simples e r\u00e1pida, mas imagina se voc\u00ea pudesse escrever somente a tag de abertura dos seus elementos? Com certeza ganharia um tempo preciso. Isso \u00e9 poss\u00edvel com os pr\u00e9-processadores HTML<\/strong>.<\/p>\n

Pr\u00e9-processadores s\u00e3o programas que recebem um texto e ap\u00f3s ser compilado geram uma sa\u00edda que pode ser interpretada pelo seu navegador. Hoje em dia \u00e9 muito comum o uso de pr\u00e9-processadores para CSS (Escrevi um artigo falando sobre o LESS<\/a>), por\u00e9m h\u00e1 esse tipo de ferramenta para HTML tamb\u00e9m.<\/p>\n

Alguns pr\u00e9-processadores HTML<\/h2>\n
    \n
  • Markdown<\/a><\/li>\n
  • HAML<\/a><\/li>\n
  • Slim<\/a><\/li>\n
  • Jade<\/a><\/li>\n
  • CoffeeKup<\/a><\/li>\n<\/ul>\n

    No exemplo abaixo criamos uma div com atributo id igual a conte\u00fado<\/em>. Para informar ao pr\u00e9-processador que queremos essa div conte\u00fado dentro do elemento body perceba que indentamos o texto #conteudo<\/em> mais para dentro. A mesma coisa foi feita com o texto T\u00edtulo exemplo<\/em> e o restante.<\/p>\n

    \r\nbody\r\n #conteudo\r\n   h1 T\u00edtulo exemplo\r\n   .box \r\n      p Par\u00e1grafo\r\n<\/pre>\n
    Exemplo de sa\u00edda ap\u00f3s ser compilado<\/p>\n
    \r\n<body>\r\n  <div id="conteudo">\r\n     <h1>Markup examples<\/h1>\r\n       <div class="box">\r\n          <p>Par\u00e1grafo<\/p>\r\n       <\/div>\r\n  <\/div>\r\n<\/body>\r\n<\/pre>\n
    Outro exemplo usando Slim. Na aba Slim<\/em> a sintaxe do compilador Slim, e na aba Result<\/em> o resultado final<\/p>\n
    \n
    nav\r\n    ul\r\n        li\r\n            a href='#' Home\r\n        li\r\n            a href='#' About\r\n        li\r\n            a href='#' Clients\r\n        li\r\n            a href='#' Contact Us<\/code><\/pre>\n
    See the Pen vEKwEm<\/a> by Carlos Eduardo (@kadunew<\/a>) on CodePen<\/a>.<\/p>\n<\/div>\n