Como su nombre indica, el preprocesador es la primera etapa de todo el proceso de compilación e incluye la eliminación de comentarios, la expansión de macros, la inclusión de encabezados, etc.
En HTML y CSS, cuando se trata de escribirlo, es un poco crucial ya que tenemos que hacer el mismo trabajo una y otra vez, como cerrar la pestaña y repetir el mismo atributo para el mismo elemento, lo que conducirá a la ineficiencia. Para superar estos problemas existen los Pre-procesadores. Entonces, los preprocesadores en HTML no son más que los mismos que en otros idiomas, toma la entrada en forma de datos y la convierte en otros tipos de datos. En el caso de marcas como HTML y CSS, el popular preprocesador incluye Haml y Sass .
El preprocesador HTML también se puede entender como un programa que ayuda al desarrollador a generar la sintaxis HTML a partir de la sintaxis del preprocesador. Agregará algunas características únicas que no se presentan en la sintaxis HTML pura. Como los preprocesadores son los programas, siempre se procesan en algunos idiomas, por lo tanto , Haml se procesa en HTML y Sass .
Preprocesador HAML: Haml significa HTML Abstraction Markup Language creado por Hampton Catlin y el único objetivo detrás de crearlo es hacer que el marcado sea hermoso. Es básicamente un preprocesador basado en Ruby y requiere que Ruby esté instalado en su máquina local para Mac OS, Ruby viene preinstalado mientras que para Windows el usuario puede instalarlo desdeaquí _ Para instalar Haml, siga los siguientes comandos.
- Para instalar HAML:
gem install haml
- Para convertir HAML a HTML:
haml index.haml index.html
Nota: El comando debe ejecutarse dentro del mismo directorio donde reside el archivo de índice.
Ejemplos:
- Código para el encabezado en Haml Pre-Processor:
html
%body %center %header %h1GeeksforGeeks %section %bA Computer Science Portal for Geeks
- Código de código HAML convertido en HTML:
html
<body> <center> <header> <h1>GeeksforGeeks</h1> </header> <section> <b>A Computer Science Portal for Geeks</b> </section> </center> </body>
- Salida: la salida del HTML anterior o el código HAML.
Nota: El código Haml reducirá la legibilidad del código para el código HTML, pero el código se reducirá sintácticamente y también por línea.
VENTAJAS
Los siguientes puntos para los que se considera útil el preprocesador HAML:
- Prefiere el marcado hermoso: facilita el marcado organizado del código con una experiencia fácil de usar y también presenta la salida de manera estructurada.
- Regla DRY (Don’t Repeat Yourself): sigue el enfoque DRY para descartar el código HTML innecesario que implica una mayor repetición.
HTML
<body> 2 3 <!--Heading tags are opened and closed--> 4 <h2>GeeksforGeeks, A Computer Science portal for geeks.</h2> 5 6 <!--Body is closed--> 7 </body>
Los preprocesadores de HTML evitan todo esto al confiar en la sangría, no en el texto, para determinar dónde comienzan y terminan los elementos y bloques de código. No solo funciona en plantillas grandes, sino que da como resultado plantillas más pequeñas, lo que hace que el código sea mucho más limpio de ver.
Producción:
%cuerpo
%h2 GeeksforGeeks, un portal de informática para geeks.
- Se debe preferir el marcado con buena sangría: para mejorar la apariencia, el lenguaje de marcado debe tener una buena sangría, lo que facilita la lectura. También determina dónde comienza y termina un elemento.
- Debe haber una estructura HTML clara: con un esfuerzo mínimo, ayuda a mantener el lenguaje de marcado con una estructura clara y una comprensión lógica del resultado final.
Publicación traducida automáticamente
Artículo escrito por viragumathe05 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA