Wahrscheinlichkeiten sind, mittlerweile wissen Sie alles über Sass und seine Brüder (LESS, Stylus usw.). Sie lieben oder hassen sie, diese CSS-Präprozessoren machen einen großen Aufschwung in der Entwicklungsgemeinschaft. In vielerlei Hinsicht stellen sie eine schnellere und effizientere Methode zum Schreiben von CSS dar. Wenn Sie an Bord sind, werden Sie zweifellos die Flexibilität schätzen, die sie für Ihr Projekt mit sich bringen.
Sobald Sie von dem CSS-Präprozessor-Fehler gebissen werden, werden Sie unvermeidlich HTML betrachten und sich fragen, warum es so umständlich sein muss. Warum vereinfacht jemand die Schreibweise von Markups nicht drastisch? Es stellt sich heraus, dass die gleichen Leute, die uns Sass gebracht haben, genau dies mit einer Sprache namens Haml getan haben. Heute werden wir einen Blick darauf werfen, wie Sie Haml verwenden können, um Ihre Schreibweise vollständig zu ändern.
Was ist Haml?
Im Kern ist Haml a leichte Auszeichnungssprache. Das beste Äquivalent, mit dem Sie wahrscheinlich vertraut sind, ist Gruber's Markdown, das funktional ähnlich ist, sich aber mehr an Autoren richtet.
Wie Markdown macht Haml das Schreiben von HTML viel einfacher, und wenn ich sage, "viel einfacher"? Ich meine wirklich, Sie glauben nicht, wie viel Zeit Sie durch den Einsatz von Haml sparen können. Meiner Meinung nach ist es sogar eine offensichtliche Zeitersparnis als Sass. Viele Entwickler werfen einen Blick auf Sass und denken:? Neat! Aber ich sehe keine Notwendigkeit dafür.? Bei Haml sollte fast jeder Entwickler, gleichgültig, ob er damit einverstanden wäre oder nicht, sofort die intensiven zeitsparenden Vorteile erkennen, die er bringt.
Nicht nur für Ruby-Entwickler
Das große Problem mit Haml ist, dass es einschüchternd sein kann, einfach weil die Haml-Website so auf Ruby-Entwickler ausgerichtet ist. Ein zufälliger HTML-Entwickler wird nur lange genug auf dieser Site vorbeischauen, um die Anweisung zu lesen Haml ist der nächste Schritt beim Generieren von Ansichten in Ihrer Rails-Anwendung. Dies kombiniert mit mehreren Verweisen auf ERB schreit nur, dass Sie nicht hierher gehören. um alte Front-End-Entwickler zu vereinfachen.
Das ist definitiv schade, denn wie ich eben erwähnte, kann jeder, der HTML schreibt, Haml in gewisser Hinsicht verwenden. Sicher, Sie werden nicht alle Funktionen nutzen, aber ich bin sicher, dass Sie auch nicht alle Funktionen von Photoshop verwenden, aber Sie können es trotzdem täglich starten.
Mein Punkt ist, wenn Sie in Ihrem Leben noch nie eine Zeile mit Ruby geschrieben haben und dies nicht planen, lassen Sie sich nicht von Haml abschrecken. Es macht immer noch viel Spaß. Heute besprechen wir Haml lediglich als Möglichkeit, HTML zu schreiben. Unabhängig davon, wo Sie sich im Entwicklungsspektrum befinden, sollten Sie in der Lage sein, mitzuverfolgen.
Deine erste Linie von Haml
Nun, da Sie eine grundlegende Vorstellung davon haben, was Haml auf konzeptioneller Ebene ist, ist es Zeit, die Reifen zu treten und zu sehen, wie es funktioniert. Eventuell müssen wir besprechen, wie Sie Ihren Haml in HTML kompilieren können (keine Sorge, es ist mühelos), aber versuchen Sie das erst einmal zu ignorieren und nehmen Sie einfach die Sprache auf. Wenn ich sage? Kompiliert zu? wissen Sie einfach, dass wir diesen Prozess bald behandeln werden.
Das Schöne an Haml ist, dass es "DRY" ist, was bedeutet, dass versucht wurde, so viel lästige inhärente HTML-Wiederholung wie möglich zu beseitigen. Betrachten Sie zum Beispiel die Struktur von Tags. Hier ist eine Standard-Absatzstruktur:
HTML:
Beachten Sie, dass selbst der einfachste Teil von HTML einige Wiederholungen erfordert. Das Absatz-Tag muss am Anfang der Anweisung stehen, und am Ende muss ein entsprechendes schließendes Tag stehen. Was wäre, wenn wir all diesen Unsinn überspringen könnten? Hier ist dieselbe Aussage in Haml:
Haml:
In Haml setzen wir HTML-Tags mit einem?%? und es kümmert sich um den Rest. Aber warten Sie bitte, wie unterscheidet man zwei Elemente ohne das schließende Tag? Die Antwort ist natürlich, dass Haml ist Whitespace abhängigDas heißt, es verwendet die visuelle Struktur Ihres Codes, um die HTML-Ausgabe zu bestimmen. Hier ist ein weiteres Beispiel, das mehrere Elemente verwendet und sogar einige Elemente in anderen verschachtelt (die Listenelemente sind in der ungeordneten Liste verschachtelt).
Haml:
Im einfachen alten HTML-Code dienen die Einrückungen in einer ungeordneten Liste lediglich zur visuellen Orientierung und haben eigentlich keine semantische Bedeutung. In Haml sagen sie jedoch dem Compiler, dass diese Listenelemente in den vorherigen Tag fallen, in diesem Fall ein ul.
Es mag schwierig sein, das Gehirn zuerst zu umwickeln, aber der Code oben ist Der Code unten bedeutet, dass sie vollkommen gleichwertig sind. Wenn wir den Haml oben eingeben und ihn einem Compiler zuführen, spuckt er den HTML-Code aus.
HTML:
Wie Sie sehen, erfordert die HTML-Version viel mehr Zeichen. Durch die Verwendung von Haml haben wir uns über dreißig Tastatureingaben in diesem einen kleinen Ausschnitt gesichert. Erweitern Sie dieses Konzept auf eine gesamte Website, und Sie können die Auswirkungen leicht erkennen.
Klassen und IDs
Ohne die herkömmliche Tag-Struktur fragen Sie sich möglicherweise, wie Sie zusätzliche HTML-Elemente wie Klassen und IDs deklarieren. Haml ist Ihnen weit voraus und verwendet sogar eine Syntax, die Ihnen ungewohnt bekannt vorkommt.
Haml:
Wie Sie sehen können, ist das. und ?#? Symbole bezeichnen Klassen bzw. IDs. Das ist großartig, da Sie mit dieser Methode in CSS bereits vertraut sind. Diese Vertrautheit bedeutet, dass Sie Haml in kürzester Zeit abholen können, wenn Sie erst einmal richtig eingetaucht sind. So kompiliert dieser Code.
HTML:
Divs sind Magie
Seien wir ehrlich, trotz all der schicken neuen HTML5-Elemente lieben wir alle unsere Divs.Da dieses Element so häufig ist, hat Haml ihm eine besonders einfache Syntax zugewiesen. Überlegen Sie, wie Sie denken, dass Sie in Haml folgendes HTML schreiben könnten.
HTML:
Angesichts dessen, was wir bisher gelernt haben, werden Sie zweifellos zu der Schlussfolgerung gelangen, dass eine Form von% div? ist hier notwendig. Mit Haml können Sie jedoch die div-Syntax alle zusammen überspringen. Um den obigen HTML-Code in Haml zu schreiben, reicht dies aus.
Haml:
Das ist es! Dieser Code wird zu einem vollständigen Div mit der ID "someDiv" übersetzt. Selbst die Skeptiker unter Ihnen müssen zugeben, dass dies ziemlich knapp ist. Einmal mehr sehen wir die klaren Vorteile, wenn wir unser Markup wie CSS schreiben können.
Um sicherzugehen, dass Sie wirklich wissen, wie das funktioniert, finden Sie hier ein viel ausführlicheres Beispiel. Diesmal verwenden wir ein Hauptdiv und zwei innere Divs zusammen mit vielen anderen Elementen.
Haml:
HTML:
Dieses Mal kann man wirklich die unglaubliche Kraft von Haml spüren. Der Charme hier geht über die Tatsache hinaus, dass wir Tonnen von Charakteren und sogar ein paar ganze Zeilen eingespart haben. Beachten Sie, wie viel einfacher es ist, den Haml auf einen Blick zu lesen. Das ganze unangenehme Durcheinander, das mit HTML geliefert wird, wurde entfernt und stattdessen eine klare Hierarchie von Markups, die sofort erkennbar ist.
Was ist mit HTML5?
Nur für den Fall, dass Sie sich fragen, Haml funktioniert gut mit allen coolen neuen Tags in HTML5. Es ist in der Tat egal, welche Art von Tags Sie erstellen möchten. Wenn du schreibst % somecrazytag? Das Ausgabeergebnis wird sein ?? ungeachtet der Tatsache, dass dies nicht einmal gültiges HTML ist.
Hier ein kurzes Beispiel zur Veranschaulichung, das die neuen HTML5-Tags für Header, Navis, Abschnitte und Fußzeilen verwendet.
Haml:
HTML:
Mischen Sie es mit HTML
Eine letzte großartige Sache bei Haml ist, dass Sie, genau wie bei Sass, immer die ursprüngliche Syntax verwenden können, wann immer Sie möchten, und alles noch gut kompiliert wird. Ich mag es beispielsweise nicht, wie Haml das Einfügen von einfachen Textlinks (etwas skurril) handhabt. Ich halte mich an die normale HTML-Syntax.
Haml:
Hier mische ich Vanille-HTML mit Haml und das ist absolut akzeptabel. Wenn dies kompiliert wird, ist das Ergebnis genau das, was Sie erwarten würden.
HTML:
Dadurch wird die Verwendung von Haml sehr einfach. Wenn Sie auf etwas stoßen, das Sie einfach nicht herausfinden können, müssen Sie nicht stundenlang recherchieren, um nach der Lösung zu suchen. Verwenden Sie einfach HTML!
Haml lutscht nach Inhalten
Je mehr ich nach Haml recherchierte, desto mehr wurde mir klar, dass ich nicht der einzige bin, der durch seine Link-Syntax oder andere Inhaltsstrukturen gestört wurde. In der Tat schrieb Chris Eppstein ein mutiges Stück mit dem Titel Haml Sucks for Content, in dem er sogar eine Vereinbarung zu dieser Aussage von Haml-Schöpfer Nathan Weizenbaum erzielte!
Lesen Sie diesen Beitrag unbedingt durch, bevor Sie diesen kommentieren, da er auf viele gültige Haml-Kritiken verweist, denen ich vollkommen zustimme. Die von Eppstein angebotene Lösung besteht darin, Haml nur für "Layout & Design" zu verwenden. Zwecke. Er kommt dann zu der gleichen Schlussfolgerung wie ich: Es ist in Ordnung, HTML in Ihrem Haml zu verwenden. Manchmal ist es einfach einfacher.
Eppstein weist auch auf andere Möglichkeiten hin, beispielsweise die Verwendung des Haml-Markdown-Filters zum Markieren Ihres Inhalts.
Tools zum Kompilieren von Haml zu HTML
Dies ist der Teil, in dem Sie für die Hügel rennen, weil ich anfange zu reden, dass Sie Ruby-Edelsteine installieren, um Ihren Code richtig zu kompilieren? Falsch. Glücklicherweise müssen wir weder durch ausgefallene Reifen springen noch die Befehlszeile ausbrechen, um Haml zu kompilieren. Es gibt viele großartige Tools, die es für uns tun.
Für den Anfang gibt es die App # haml.try auf der offiziellen Haml-Website. Dadurch können Sie Haml in ein Textfeld eingeben und eine HTML-Ausgabe erhalten.
Wenn Sie jedoch nach einem Online-Compiler suchen, können Sie viel besser als dieses einfache Tool. Ich persönlich mag Rendera wirklich sehr. Es hat eine schöne geteilte Ansicht, die Ihre Haml-Eingabe und HTML-Ausgabe nebeneinander anzeigt. Sie können sogar zwischen der Live-HTML-Ausgabe und der Quelle wechseln.
Interessant ist auch, dass Tinkerbin Haml unterstützt. Dies ist nicht der richtige Weg, wenn Sie die HTML-Ausgabe kopieren und einfügen möchten, aber es ist wahrscheinlich der beste Weg, um mit Haml und Sass zu experimentieren, ohne irgendwelche Setup-Arbeit.
Für Mac-Benutzer
Wenn Sie Haml in Ihrer lokalen Programmierumgebung einsetzen möchten und zufällig ein Mac-Benutzer sind, haben Sie Glück, denn es gibt einige fantastische Tools, die Ihnen dabei helfen. Als erstes sollten Sie die kostenlose öffentliche Beta-Version von Chocolat herunterladen, einem tollen Texteditor, der die einfache Syntax-Hervorhebung für eine Million verschiedene Sprachen unterstützt, einschließlich Haml. Es gab auch mindestens einen Versuch, einen Haml-Espresso-Zucker herzustellen.
Leider ist der einzige wirkliche Vorteil von Chocolat, dass Sie keinen Klartext eingeben müssen, sondern Ihren Code nicht wirklich für Sie kompilieren. Dazu müssen Sie sich eine andere kostenlose öffentliche Beta ansehen: Codekit.
Codekit arbeitet mit Haml, Sass, Less, Stylus und CoffeeScript. Im Grunde behält es den Projektordner im Auge, so dass Sie beim Speichern oder Aktualisieren eines dieser Dateitypen (in unserem Fall einer .haml-Datei) automatisch die entsprechende Standarddatei verarbeiten und ausgeben. Schauen Sie sich auch Live Reload an, das auf dieselbe Weise funktioniert, sich aber in Ihrer Menüleiste befindet.
Fazit
Wenn Sie sich für den Sass, LESS oder Stylus entschieden haben und nach einer ähnlichen Lösung für HTML gesucht haben, ist Haml Ihre Antwort. Es ermöglicht Ihnen, einen einfach einfachen Code zu schreiben, der sowohl Zeit spart als auch, wenn Sie sich daran gewöhnt haben, einfacher zu lesen ist.
Das Unglückliche an Haml ist, dass es für Nicht-Ruby-Entwickler etwas gruselig ist, einfach weil die Dokumentation so auf Ruby ausgerichtet ist. Ich verspreche Ihnen, auch wenn Sie über Ruby nichts wissen, macht es Haml immer noch Spaß, mit der einfachen HTML-Ausgabe zu experimentieren.
Nun, da wir die Grundlagen besprochen haben, gehen Sie raus und probieren Sie Haml selbst aus. Weitere Informationen finden Sie auf der Haml-Website. Setzen Sie ein Lesezeichen für dieses Haml-Cheatsheet, um schnell loszulegen.