Vor der Geburt von Sass und CoffeeScript hat Haml die Rails-Szene als Alternative zu ERB / RHTML als Markup-Vorlage getroffen. Nach Mietern, die vom meteorischen Ruby-Rahmen evangelisiert wurden, Haml ( H. TML zu bstraction m Arkup l anguage) fungiert in seiner einfachsten Form als HTML-Präprozessor und ist der Ansicht, dass Markups schön, klar, gut eingerückt und frei von Wiederholungen sein sollten.
Obwohl seine CSS- und JavaScript-kompilierenden Gegenstücke inzwischen an Popularität gewonnen haben, hat die Präprozessorbewegung die Erstellung von Werkzeugen erleichtert, die auch die Haml-Eingabeleiste senken. Wie wir gleich untersuchen werden, können die Befehlszeile und die Ruby-Installation jetzt vollständig vermieden werden.
Im Kern ist Haml knappes und streng eingerücktes HTML, daher setzt dieses Tutorial eine starke Vertrautheit mit HTML voraus. Wie zu erwarten, sind Ruby-Grundlagen und Kenntnisse dieses Frameworks erforderlich, wenn Sie es dynamisch in Rails / Sinatra / Similar verwenden möchten.
Letztendlich ist es am einfachsten, Haml zu schätzen, es zu sehen:
!!! 5%html{lang: 'en'} %head %title Sample Haml %body %h1 ArchaeopteryxDieses Snippet wird wie folgt kompiliert:
Sample Haml Archaeopteryx
Mit freundlicher Genehmigung von Hampton Catlin (der heutzutage eher ein Synonym für Sass ist) trat Haml 2006 zum ersten Mal auf. Eine Zeit lang waren Sass und Haml zusammen in demselben Juwel verpackt. Sass hat seitdem eine allgegenwärtigere Verwendung außerhalb von Rails erreicht, während Haml aufgrund seiner Aufnahme als Teil von immer noch beliebt ist 'The Rails Way.'
huion h610 pro vs wacom intuos ziehen
Das Projekt befindet sich derzeit in Version 3.1.4 und wird von Nathan Weizenbaum gepflegt. Haml ist MIT-lizenziert und die Quelle ist verfügbar auf GitHub.
Wie bei anderen Präprozessoren (WENIGER, Sass, CoffeeScript usw.) sind einige schnelle Schritte erforderlich, um Haml in Ihren Workflow zu integrieren. Sie erstellen Dateien, die auf .haml enden. Für die HTML-Konvertierung ist jedoch vor dem Rendern des Browsers eine der folgenden Methoden erforderlich:
Wenn Ruby ist installiert Auf Ihrem Computer (unter OS X vorinstalliert) kann das Juwel über die Befehlszeile heruntergeladen werden:
gem install hamlWenn das Juwel erfolgreich installiert wurde, erhalten Sie die Möglichkeit, Haml-Dateien mit dem zu konvertieren haml Befehl, ersetzen Eingang und Ausgabe mit entsprechenden Dateinamen:
haml input.haml output.htmlDies ist eine großartige Möglichkeit, um zu experimentieren und sich mit der Syntax vertraut zu machen, aber sie lässt sich nicht effizient skalieren. Im Gegensatz zu Sass ist der Haml-Edelstein nicht mit einer Uhrenfunktion für die automatische Konvertierung ausgestattet. Wenn möglich, wird bevorzugt eine der folgenden Techniken verwendet.
Die Verwendung von Rails ist das beste Szenario für die Implementierung. Fügen Sie einfach das hinzu Haml-Rails Edelstein zu Ihrem Gemfile und verwenden Sie den Bundler (Bundle-Installation oder einfach Bundle). Vom Framework generierte Ansichten wechseln zu a .html.haml Erweiterung, und die gesamte Kompilierung wird für Sie erledigt.
Neben der Unterstützung einer Reihe von kongruenten vorverarbeiteten Sprachen CodeKit und LiveReload Erleichtern Sie die Einrichtung ohne die Befehlszeile zum Kompilieren von Haml-Dateien beim Speichern (neben anderen nützlichen Funktionen). Wenn Sie sich von Ruby fernhalten oder die Befehlszeile meiden möchten, ist dies der beste Pfad.
Bevor Sie hineinspringen, gehen Sie zum Editor-Unterstützung Seite, um eine korrekte Syntaxhervorhebung in Ihrem bevorzugten Texteditor sicherzustellen.
HTML-Tag-Elemente werden mit dem Prozentzeichen (%) gefolgt vom Tag-Namen (z. B.% h1) erstellt.
!!! 5%htmlKompiliert zu:
Wie Sie vielleicht bemerkt haben, gibt es kein Haml-Äquivalent zu einem schließenden Tag - sie werden für Sie hinzugefügt. Dieses Snippet enthält auch eine Kurzform, die für die einfache Aufnahme von Doctype bereitgestellt wird. Viele weitere davon sind im Internet verfügbar Dokumentation .
Da Haml keine schließenden Tags hat, wird die Verschachtelung über strenge Leerzeichen- und Einrückungsstandards gesteuert. Der Inhalt kann in derselben Zeile wie das Tag enthalten sein oder in der folgenden Zeile eingerückt sein. Verschachtelte Tags müssen in einer neuen Zeile eingerückt werden.
%h1 Gallimimus%h2 Cretaceous Period%h3 %strong Discovered in 1963Kompiliert zu:
Gallimimus
Cretaceous Period
Discovered in 1963
Während Sie wählen können, ob Sie Inhalte in dieselbe Zeile aufnehmen oder verschachteln möchten, wird ein Fehler ausgegeben, wenn beide gleichzeitig versucht werden. Die Anzahl der verwendeten Leerzeichen oder Tabulatoren muss konsistent sein. Andernfalls gibt der Compiler ebenfalls einen Fehler zurück.
-# Returns with an error: content is on the same line and nested inside%h4 Max Height: %em 9m-# Returns with an error: inconsistent indentation%p Present in the same period as the %span TyrannosaurusDieses Segment würde nicht erfolgreich kompiliert.
Attribute können Tags über einen Ruby-Hash (eine Gruppe von Schlüssel-Wert-Paaren, die einem assoziativen Array sehr ähnlich sind) hinzugefügt oder normalerweise in Klammern hinzugefügt werden, die an das Tag angehängt sind.
%a{href: 'http://en.wikipedia.org/wiki/Spinosaurus', title: 'Spinosaurus'} Spinosaurus%a(href='http://en.wikipedia.org/wiki/Spinosaurus' title='Spinosaurus') SpinosaurusKompiliert zu:
Spinosaurus Spinosaurus Während ID- und Klassenattribute wie oben beschrieben hinzugefügt werden können, werden sie häufiger wie an das Tag angehängte CSS-Selektoren dargestellt. Es ist erwähnenswert, dass Haml a einfügt, wenn kein HTML-Tag explizit definiert ist .
%section#content.container .stats.containerKompiliert zu:
Filter, die mit einem führenden Doppelpunkt gekennzeichnet sind, ermöglichen das Filtern von darin verschachtelten Inhalten außerhalb von Haml, bevor sie zur Ausgabe hinzugefügt werden. Beispiele beinhalten : Javascript , :markdown , und : cdata ;; Der JavaScript-Filter beispielsweise schließt verschachtelte Inhalte ein und CDATA-Tags.
:javascript $('.dinosaur').on('click', function(e) { alert('rawr'); });Kompiliert zu:
//Wir werden den Markdown-Filter später noch einmal betrachten, da er eine nützliche Rolle bei der Überwindung des größten Mangels von Haml spielt.
Neben der einfachen HTML-Konvertierung lässt sich Ruby einfach in Ihre Vorlagen einbetten und ausgeben - Funktionen, die in Verbindung mit Rails, Sinatra und dynamischen Daten im Allgemeinen erforderlich sind. Die auszuwertenden Zeilen beginnen mit einem Bindestrich (-), während die auszugebenden Zeilen mit einem Gleichheitszeichen (=) beginnen.
Wenn Sie mit dem Einbetten von Ruby in ERB oder dem Einfügen von PHP in HTML vertraut sind, ist es dasselbe Konzept - der Bindestrich und die Gleichheitszeichen ersetzen Konstrukte wie ,, und
- title = 'Stegosaurus'%h1= titleKompiliert zu:
Stegosaurus
Auf diese Weise können auch Schleifen und bedingte Logik hinzugefügt werden. Wie bei Markup-Tags ist es nicht erforderlich, diese Anweisungen zu schließen. Durch Einrücken wird gesteuert, in welchen Inhalt sie fallen. In Rails (und anderen MVC-Frameworks) wird generell bevorzugt, dass Ihre Markup-Vorlage so wenig Logik wie möglich enthält. Wenn sich das Schreiben umständlich oder schwierig anfühlt, sollte das Segment wahrscheinlich an einer anderen Stelle in Ihrer Anwendung gespeichert sein.
- title = 'Pterodactyl'- if title == 'Stegosaurus' %h2 The Greatest Dinosaur Ever- else %h2 Some Random DinosaurKompiliert zu:
Some Random Dinosaur
Nachdem Sie sich mit der grundlegenden Syntax vertraut gemacht haben, werfen wir einen Blick auf die Gründe für das Hinzufügen eines weiteren Akronyms zu Ihrem Workflow:
Hamls Strenge beim Verschachteln und Einrücken kann für Unbekannte einige Probleme verursachen. Glücklicherweise ist es ziemlich einfach, diese Probleme zu umgehen:
wie man Vektoren im Illustrator bearbeitet
Das Formatieren von Inhalten (insbesondere Inline-Tags auf Textblöcken) ist Hamls Hauptschwäche. Da nicht mehrere Tags in derselben Zeile deklariert werden können, müssen Sie entweder:
%p Visit a local %em Museum or a %em Science Institute%p Visit a local Museum or a Science Institute :markdown Visit a local *Museum* or a *Science Institute*Kompiliert zu:
Visit a local Museum or a Science Institute
Visit a local Museum or a Science Institute
Visit a local Museum or a Science Institute
Wenn der erzeugte HTML-Code nicht Ihren Standards entspricht, können Operatoren wie und | verwendet werden stehen zur genaueren Kontrolle über die Ausgabe des Compilers zur Verfügung:
%h2<%span Remove whitespace in a tag%h2 %span Remove %span> whitespace around %span a tag%h2 Evaluate multiple lines | as one with the pipe character |Kompiliert zu:
Remove whitespace in a tag
Removewhitespace arounda tag
Evaluate multiple lines as one with the pipe character
Wenn Haml mit einem Ruby-Framework gekoppelt ist, stellen Sie möglicherweise fest, dass Ihre HTML-Quelle im Produktionsmodus nicht eingerückt ist. Unter einer Reihe von Möglichkeiten , das :hässlich Die Steuerung legt fest, ob die Ausgabe nach dem Kompilieren formatiert werden soll. In Rails ist es standardmäßig auf true gesetzt und dient dazu, die Renderleistung erheblich zu verbessern, ohne das zu beeinflussen, was der Benutzer sieht.
Wie bereits mehrmals erwähnt, eignet sich Haml hervorragend, um HTML in ein wohlgeformtes Markup mit strengen Konventionen umzuwandeln - was sowohl der Geschwindigkeit als auch der Dynamik der Zusammenarbeit zugute kommt. Es ist eine kurze Arbeit, die Syntax zu erlernen, und sie glänzt wirklich, wenn sie mit einem Ruby-Framework kombiniert wird. Während Haml einige Probleme mit der Formatierung von Inhalten hat, haben wir mehr als einen Weg, um akzeptabel damit umzugehen. Dies war keineswegs eine vollständige Liste aller in Haml verfügbaren Produkte - sehen Sie sich auf jeden Fall die an Referenz Weitere Konzepte wie Kommentieren, Interpolieren und selbstschließende Tags, sobald Sie sich daran gewöhnt haben.
