Las probabilidades son, ya sabes todo sobre Sass y sus hermanos (LESS, Stylus, etc.). Los ama o los odia, estos preprocesadores de CSS están causando un gran revuelo en la comunidad de desarrollo. En muchos sentidos, representan una forma más rápida y eficiente de escribir CSS y, si te incorporas, sin duda apreciarás la flexibilidad que aportan a tu proyecto.
Una vez que te haya mordido el error del preprocesador de CSS, inevitablemente empezarás a ver HTML y te preguntarás por qué tiene que ser tan engorroso. ¿Por qué alguien no simplifica drásticamente la forma en que escribimos el marcado? Resulta que las mismas personas que nos trajeron a Sass han hecho precisamente eso con un lenguaje llamado Haml. Hoy vamos a echar un vistazo y ver cómo usar Haml para cambiar completamente la forma en que escribes el marcado.
¿Qué es Haml?
En su esencia, Haml es un lenguaje de marcado ligero. El equivalente más cercano con el que probablemente estés familiarizado es el Markdown de Gruber, que es funcionalmente similar pero está más orientado a los escritores.
Al igual que Markdown, Haml hace que escribir HTML sea mucho más fácil, y cuando digo "mucho más fácil". lo que realmente quiero decir es que no vas a creer cuánto tiempo puedes ahorrar usando Haml. En mi opinión, es incluso un ahorro de tiempo más obvio que Sass. Muchos desarrolladores echan un vistazo a Sass y piensan: "¡Perfecto!" Pero realmente no veo una necesidad para ello. Con Haml, casi todos los desarrolladores, independientemente de si consienten en usarlo o no, deben ver de inmediato los beneficios de ahorro de tiempo que trae a la mesa.
No solo para Ruby Developers
El gran problema con Haml es que puede ser intimidante simplemente porque el sitio web de Haml está muy dirigido a los desarrolladores de Ruby. Un desarrollador de HTML casual pasará por este sitio solo el tiempo suficiente para leer la declaración "Haml es el siguiente paso para generar vistas en su aplicación Rails". Esto, combinado con múltiples referencias a ERB, simplemente grita: ¿no perteneces aquí? a los desarrolladores de front-end viejos lisos.
Esto definitivamente es desafortunado porque, como acabo de mencionar, todos los que escriben HTML pueden usar Haml en cierto sentido. Claro, no usarás todas las funciones, pero estoy seguro de que tampoco usas todas las funciones de Photoshop, pero aún así lo enciendes a diario.
Lo que quiero decir es que si nunca escribiste una línea de Ruby en tu vida y no planeas hacerlo, no dejes que eso te asuste de Haml. Todavía es inmensamente divertido. Hoy hablaremos de Haml simplemente como una forma de escribir HTML, por lo que no importa dónde se encuentre en el espectro de desarrollo, debería poder seguirlo.
Tu primera línea de Haml
Ahora que tiene una idea básica de lo que Haml es a nivel conceptual, es hora de patear los neumáticos y ver cómo funciona. Eventualmente, tendremos que discutir cómo compilar su Haml en HTML (no se preocupe, es fácil), pero por ahora trate de ignorarlo y simplemente asimile el lenguaje. Cuando digo? Compilamos? Sólo sé que vamos a cubrir este proceso pronto.
La belleza de Haml es que está "SECO", lo que significa que ha habido un intento de eliminar la molesta repetición de HTML que es posible. Por ejemplo, considere la estructura de las etiquetas. Aquí hay una estructura de párrafo estándar:
HTML:
Observe cómo incluso el bit más simple de HTML implica alguna repetición. La etiqueta de párrafo debe colocarse al comienzo de la declaración, y luego la etiqueta de cierre correspondiente debe colocarse al final. ¿Y si pudiéramos omitir todas estas tonterías? Aquí está la misma declaración en Haml:
Haml:
En Haml, prefijamos etiquetas HTML con un?%? Y se encarga del resto. Pero espera que implores, ¿cómo se diferencia uno entre dos elementos sin la etiqueta de cierre? La respuesta es, por supuesto, que Haml es. espacio en blanco dependiente, lo que significa que utiliza la estructura visual de su código para determinar el resultado HTML. Aquí hay otro ejemplo que usa múltiples elementos e incluso anida algunos elementos dentro de otros (los elementos de la lista están anidados en la lista desordenada).
Haml:
En el HTML antiguo, las sangrías en una lista desordenada son meramente de guía visual y no tienen ningún significado semántico. Sin embargo, en Haml, le dicen al compilador que esos elementos de la lista van dentro de la etiqueta anterior, que en este caso es una ul.
Puede ser difícil envolver su cerebro al principio, pero el código de arriba es El código de abajo, lo que significa que son perfectamente equivalentes. Si escribimos el Haml en la parte superior y lo introducimos en un compilador, el código HTML se muestra a continuación.
HTML:
Como puede ver, la versión HTML requiere muchos más caracteres. Al usar Haml, nos hemos ahorrado más de treinta pulsaciones en este pequeño fragmento. Expanda este concepto en un sitio web completo y podrá ver fácilmente las implicaciones.
Clases e identificaciones
Sin la estructura de etiquetas tradicional, es posible que se pregunte cómo declarar elementos HTML adicionales, como clases e ID. Haml está muy por delante de usted e incluso utiliza una sintaxis que le resultará extrañamente familiar.
Haml:
Como puedes ver, el?. y? #? los símbolos se utilizan para denotar clases e identificadores respectivamente. Esto es genial porque ya estás familiarizado con este método en CSS. Esa familiaridad significa que una vez que te sumerges de verdad, podrás recoger a Haml en muy poco tiempo. Así es como se compila este código.
HTML:
Los divs son magicos
Seamos realistas, incluso con todos los nuevos elementos de lujo de HTML5, todavía todos amamos a nuestros divs.Dado que este elemento en particular es tan común, Haml le ha asignado una sintaxis particularmente simple. Considera cómo crees que podrías escribir el siguiente HTML en Haml.
HTML:
Teniendo en cuenta lo que hemos aprendido hasta ahora, sin duda llegará a la conclusión de que alguna forma de?% Div? Es necesario aquí. Sin embargo, Haml te permite omitir la sintaxis div todos juntos. Para escribir el código HTML anterior en Haml, esto es todo lo que necesita.
Haml:
¡Eso es! Este código se compila en una división completa con un ID de "someDiv". Incluso los escépticos entre ustedes tienen que admitir que esto es bastante conciso. Una vez más, vemos los claros beneficios de poder escribir nuestro marcado como escribimos CSS.
Solo para asegurarnos de que realmente haya entendido cómo funciona esto, aquí hay un ejemplo mucho más extenso. Esta vez usaremos una división principal y dos internas junto con muchos otros elementos.
Haml:
HTML:
Esta vez realmente puedes comenzar a sentir el increíble poder de Haml. El encanto aquí va más allá del hecho de que hemos guardado toneladas de caracteres e incluso unas pocas líneas completas, note que es mucho más fácil leer el Haml de un vistazo. Todo el desagradable desorden que viene con HTML se ha eliminado y en su lugar hay una clara jerarquía de marcado que se puede discernir al instante.
¿Qué pasa con HTML5?
En caso de que te lo preguntes, Haml funciona bien con todas las nuevas y geniales etiquetas dentro de HTML5. De hecho, no importa qué tipo de etiquetas intente crear. Si escribes ?% somecrazytag? el resultado de salida será ?? independientemente del hecho de que esto no es ni siquiera válido HTML.
Este es un ejemplo rápido para ilustrar que utiliza las nuevas etiquetas HTML5 de encabezado, navegación, sección y pie de página.
Haml:
HTML:
Mezclarlo con HTML
Una última gran cosa acerca de Haml es que, al igual que con Sass, aún puedes usar la sintaxis original cuando lo desees y todo se seguirá compilando. Por ejemplo, personalmente no me gusta cómo Haml maneja la inserción de enlaces de texto simples (es un poco raro), así que me atengo a la sintaxis HTML normal.
Haml:
Aquí estoy mezclando HTML de vainilla con Haml y es perfectamente aceptable. Cuando esto se compila, el resultado es exactamente lo que esperas que sea.
HTML:
Esto hace que sea realmente fácil de usar Haml. Si te enfrentas a algo que simplemente no sabes cómo hacerlo, no tienes que pasar horas de investigación buscando la solución, ¡solo usa HTML!
Haml chupa por contenido
Cuanto más investigué a Haml, más me di cuenta de que no soy el único molesto por su sintaxis de enlace u otras estructuras de contenido. De hecho, Chris Eppstein escribió una pieza audazmente titulada Haml Sucks for Content, en la que incluso logró un acuerdo a esa declaración del creador de Haml, Nathan Weizenbaum.
Asegúrese de leer esa publicación antes de comentarla, ya que señala muchas críticas válidas de Haml con las que estoy completamente de acuerdo. La solución ofrecida por Eppstein es usar Haml solo para? Diseño y diseño? fines Luego procede a llegar a la misma conclusión que yo: está bien usar HTML en tu Haml. A veces es más simple.
Eppstein también señala otras posibilidades, como usar el filtro de reducción de Haml para marcar su contenido.
Herramientas para compilar Haml a HTML
Esta es la parte en la que corres por las colinas porque empiezo a hablar sobre la instalación de gemas de Ruby para compilar tu código, ¿no? Incorrecto. Afortunadamente, no tenemos que saltar a través de aros de fantasía o incluso romper la línea de comandos para compilar Haml. Hay muchas herramientas geniales que lo hacen por nosotros.
Para empezar, está la aplicación # haml.try en el sitio web oficial de Haml. Esto le permite escribir Haml en un campo de texto y recibir resultados HTML.
Sin embargo, si está buscando un compilador en línea, puede hacerlo mucho mejor que esta sencilla herramienta. Personalmente, me gusta mucho Rendera, que tiene una bonita vista dividida que muestra la entrada de Haml y la salida HTML en paralelo. Incluso puede alternar entre la salida HTML en vivo y la fuente.
También es interesante observar que Tinkerbin es compatible con Haml. No es el camino a seguir si está buscando copiar y pegar la salida HTML, pero es probablemente la mejor manera de experimentar con Haml y Sass sin ningún tipo de trabajo de configuración.
Para usuarios de Mac
Si desea utilizar Haml en su entorno de codificación local y es un usuario de Mac, tiene suerte porque hay algunas herramientas fantásticas para ayudarlo. Lo primero que querrás descargar es la versión beta pública gratuita de Chocolat, un impresionante editor de texto que admite el resaltado de sintaxis modesto para un millón de idiomas diferentes, incluido Haml. También ha habido al menos un intento de crear un Haml Espresso Sugar.
Desafortunadamente, el único beneficio real de usar Chocolat es que no tendrá que escribir texto sin formato, en realidad no compilará su código por usted. Para eso, deberás buscar otra versión beta pública gratuita: Codekit.
Codekit trabaja con Haml, Sass, Less, Stylus y CoffeeScript. Básicamente, vigila la carpeta de su proyecto para que, en el momento en que guarde o actualice uno de estos tipos de archivos (en nuestro caso, un archivo .haml), procese y genere automáticamente el archivo equivalente estándar. También asegúrese de revisar Live Reload, que funciona de la misma manera pero vive en la barra de menú.
Conclusión
Si ha subido al carro de Sass, LESS o Stylus y ha estado buscando una solución similar para HTML, Haml es su respuesta. Le permite escribir código bellamente simple que le ahorra tiempo y puede ser más fácil de leer una vez que se acostumbra a él.
Lo lamentable de Haml es que da un poco de miedo a los desarrolladores que no son Ruby, simplemente porque la documentación está muy orientada hacia Ruby. Sin embargo, lo prometo, incluso si no sabes nada acerca de Ruby, Haml sigue siendo bastante divertido investigar y experimentar con una salida HTML simple.
Ahora que hemos cubierto lo básico, sal y prueba Haml por ti mismo. Asegúrese de visitar el sitio web de Haml para obtener más información y marcar esta hoja de referencia de Haml para saltar a un inicio rápido.