1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
---
language: haml
filename: learnhaml-de.haml
contributors:
- ["Simon Neveu", "https://github.com/sneveu"]
- ["Sol Bekic", "https://github.com/S0lll0s"]
lang: de-de
---
Haml ist eine Markup- und Templatingsprache, aufgesetzt auf Ruby, mit der HTML Dokumente einfach beschrieben werden können.
Haml vermindert Wiederholung und Fehleranfälligkeit, indem es Tags basierend auf der Markup-Struktur schließt und schachtelt.
Dadurch ergibt sich kurzes, präzises und logisches Markup.
Haml kann außerhalb eines Ruby-projekts verwendet werden. Mit dem installierten Haml gem kann man das Terminal benutzen um Haml zu HTML umzuwandeln:
$ haml input_file.haml output_file.html
```haml
/ -------------------------------------------
/ Einrückung
/ -------------------------------------------
/
Einrückung ist ein wichtiges Element des Haml Syntax, deswegen ist es
wichtig ein konsequentes Schema zu verwenden. Meistens werden zwei spaces
verwendet, solange die Einrückungen das gleiche Schema verfolgen können
aber auch andere Breiten und Tabs verwendet werden
/ -------------------------------------------
/ Kommentare
/ -------------------------------------------
/ Kommentare beginnen mit einem Slash
/
Mehrzeilige Kommentare werden eingerückt und mit einem Slash
eingeführt
-# Diese Zeile ist ein "stummes" Kommentar, es wird nicht mitgerendert
/ -------------------------------------------
/ HTML Elemente
/ -------------------------------------------
/ Tags werden durch ein Prozentzeichen und den Tagnamen erzeugt
%body
%header
%nav
/ Die Zeilen oben würden folgendes ergeben:
<body>
<header>
<nav></nav>
</header>
</body>
/ Text kann direkt nach dem Tagnamen eingefügt werden:
%h1 Headline copy
/ Mehrzeilige Inhalte müssen stattdessen eingerückt werden:
%p
This is a lot of content that we could probably split onto two
separate lines.
/
HTML kann mit &= escaped werden. So werden HTML-sensitive Zeichen
enkodiert. Zum Beispiel:
%p
&= "Ja & Nein"
/ würde 'Ja & Nein' ergeben
/ HTML kann mit != dekodiert werden:
%p
!= "so schreibt man ein Paragraph-Tag: <p></p>"
/ ...was 'This is how you write a paragraph tag <p></p>' ergeben würde
/ CSS Klassen können mit '.classname' an Tags angehängt werden:
%div.foo.bar
/ oder über einen Ruby Hash:
%div{:class => 'foo bar'}
/ Das div Tag wird standardmäßig verwendet, divs können also verkürzt werden:
.foo
/ andere Attribute können über den Hash angegeben werden:
%a{:href => '#', :class => 'bar', :title => 'Bar'}
/ Booleesche Attribute können mit 'true' gesetzt werden:
%input{:selected => true}
/ data-Attribute können in einem eigenen Hash im :data key angegeben werden:
%div{:data => {:attribute => 'foo'}}
/ -------------------------------------------
/ Verwendung von Ruby
/ -------------------------------------------
/ Mit dem = Zeichen können Ruby-werte evaluiert und als Tag-text verwendet werden:
%h1= book.name
%p
= book.author
= book.publisher
/ Code nach einem Bindestrich wird ausgeführt aber nicht gerendert:
- books = ['book 1', 'book 2', 'book 3']
/ So können zum Beispiel auch Blöcke verwendet werden:
- books.shuffle.each_with_index do |book, index|
%h1= book
if book do
%p This is a book
/
Auch hier werden wieder keine End-Tags benötigt!
Diese ergeben sich aus der Einrückung.
/ -------------------------------------------
/ Inline Ruby / Ruby Interpolation
/ -------------------------------------------
/ Ruby variablen können mit #{} in Text interpoliert werden:
%p dein bestes Spiel ist #{best_game}
/ -------------------------------------------
/ Filter
/ -------------------------------------------
/
Mit dem Doppelpunkt können Haml Filter benutzt werden.
Zum Beispiel gibt es den :javascript Filter, mit dem inline JS
geschrieben werden kann:
:javascript
console.log('Dies ist ein <script>');
```
## Weitere Resourcen
- [What is HAML?](http://haml.info/) - Eine gute Einleitung auf der Haml homepage (englisch)
- [Official Docs](http://haml.info/docs/yardoc/file.REFERENCE.html) - Die offizielle Haml Referenz (englisch)
|
