Comprendre Haml.
L’imbrication des balises « inline ».
Haml est un pré-processeur HTML qui permet de gagner du temps en écrivant dynamiquement votre Html.
Par exemple, si vous écrivez en Haml:
#content.bloc1 Un premier bloc
Donnera en Html:
Bon voilà, si vous utilisez le génial Emmet, vous comprenez vite l’utilité du truc. Pour savoir comment installer HAML, allez sur http://haml.info/
Si HAML est si simple, pourquoi cet article?
Si vous n’êtes pas habitué aux problématiques d’indentation, alors vous pouvez faire face à quelques problèmes dont je n’ai pas trouvé la réponse sur google. J’ai perdu bien 30 mn de ma life à comprendre pourquoi certains des codes suivants ne pouvait pas être interprétés:
Haml
%p je veux faire %span un span
Interprétation html du navigateur:
On voit que HAML considère très formellement le contenu d’une ligne et dans notre exemple la balise SPAN est interprété comme du texte. Il faut alors la passer à la ligne:
Mais le résultat n’est pas ce que l’on souhaite puisque HAML ferme la balise P et n’imbrique pas notre SPAN.
Pour imbriquer la balise SPAN dans mon paragraphe, j’utilise alors l’indentation (sur Codepen, l’indentation consiste en 2 espaces, ne pas utiliser la touche [TAB]):
Et là ça bloque, CodePen ne veut pas interpréter le machin…
C’est quoi ce bazar???
Illegal nesting: content can’t be both given on the same line as %p and nested within it.
Codepen nous dit que l’imbrication ne fonctionne pas, « le contenu ne peut être sur la même ligne que le <p> et imbriqué dans lui. » Je ne sais pas vous, mais j’ai trouvé cette explication un peu confuse, non?
Que se passe t’il si je passe le contenu du paragraphe à la ligne dans le code Haml?
Le rendu en HTML:
Hihi, Cha marche pas.
On voit que le contenu sort alors de ma balise p. Le contenu inline SPAN n’est toujours pas imbriqué.
La solution.
Bon le but de cet article est normalement de vous faire gagner du temps donc si vous avez le même souci, vous avez 2 solutions:
- il faut passer tout le contenu à la ligne, juste après la balise englobante.
- ou rajouter « < » juste après la balise englobante et passer le contenu à la ligne. Ainsi on « indente » tout ce qui est après la balise parente.
Les solutions sont visibles sur mon CodePen (cliquer sur le bouton « View Compiled » pour voir le résultat en html):
See the Pen Haml nestling and indent by Jerome Mercier (@jmercier) on CodePen.0
Cet article vous a plu, inscrivez-vous à la newsletter pour être alerté des prochains articles.
Et vous, vous utilisez des pré processeurs html?
