summaryrefslogtreecommitdiffhomepage
path: root/haml.html.markdown
diff options
context:
space:
mode:
authorSuzane Sant Ana <tetestonaldo@gmail.com>2017-12-31 14:27:06 -0200
committerGitHub <noreply@github.com>2017-12-31 14:27:06 -0200
commit42f9329bb3a028d374d6397991ac48b44064741e (patch)
tree1e75e2b3e122aeb863e3ffa037f6f64c4027fbf8 /haml.html.markdown
parente6b77595f2669d66ac7be43c6e6083cbff80a9a7 (diff)
parent70a36c9bd970b928adde06afb2bd69f6ba8e5d5c (diff)
Merge pull request #1 from adambard/master
update
Diffstat (limited to 'haml.html.markdown')
-rw-r--r--haml.html.markdown85
1 files changed, 76 insertions, 9 deletions
diff --git a/haml.html.markdown b/haml.html.markdown
index aed3dcae..bb8bdc54 100644
--- a/haml.html.markdown
+++ b/haml.html.markdown
@@ -3,6 +3,7 @@ language: haml
filename: learnhaml.haml
contributors:
- ["Simon Neveu", "https://github.com/sneveu"]
+ - ["Vasiliy Petrov", "https://github.com/Saugardas"]
---
Haml is a markup language predominantly used with Ruby that cleanly and simply describes the HTML of any web document without the use of inline code. It is a popular alternative to using Rails templating language (.erb) and allows you to embed Ruby code into your markup.
@@ -11,7 +12,9 @@ It aims to reduce repetition in your markup by closing tags for you based on the
You can also use Haml on a project independent of Ruby, by installing the Haml gem on your machine and using the command line to convert it to html.
+```shell
$ haml input_file.haml output_file.html
+```
```haml
@@ -36,7 +39,7 @@ $ haml input_file.haml output_file.html
To write a multi line comment, indent your commented code to be
wrapped by the forward slash
--# This is a silent comment, which means it wont be rendered into the doc at all
+-# This is a silent comment, which means it won't be rendered into the doc at all
/ -------------------------------------------
@@ -55,18 +58,27 @@ $ haml input_file.haml output_file.html
</header>
</body>
-/ The div tag is the default element, so they can be written simply like this
-.foo
+/
+ The div tag is the default element, so it can be omitted.
+ You can define only class/id using . or #
+ For example
+
+%div.my_class
+ %div#my_id
+
+/ Can be written
+.my_class
+ #my_id
/ To add content to a tag, add the text directly after the declaration
%h1 Headline copy
/ To write multiline content, nest it instead
-%p
+%p
This is a lot of content that we could probably split onto two
separate lines.
-/
+/
You can escape html by using the ampersand and equals sign ( &= ). This
converts html-sensitive characters (&, /, :) into their html encoded
equivalents. For example
@@ -97,12 +109,21 @@ $ haml input_file.haml output_file.html
/ To write data-attributes, use the :data key with its value as another hash
%div{:data => {:attribute => 'foo'}}
+/ For Ruby version 1.9 or higher you can use Ruby's new hash syntax
+%div{ data: { attribute: 'foo' } }
+
+/ Also you can use HTML-style attribute syntax.
+%a(href='#' title='bar')
+
+/ And both syntaxes together
+%a(href='#'){ title: @my_class.title }
+
/ -------------------------------------------
/ Inserting Ruby
/ -------------------------------------------
-/
+/
To output a Ruby value as the contents of a tag, use an equals sign followed
by the Ruby code
@@ -120,13 +141,38 @@ $ haml input_file.haml output_file.html
- books.shuffle.each_with_index do |book, index|
%h1= book
- if book do
+ - if book do
%p This is a book
+
+/ Adding ordered / unordered list
+%ul
+ %li
+ =item1
+ =item2
/
Again, no need to add the closing tags to the block, even for the Ruby.
Indentation will take care of that for you.
+/ -------------------------------------------
+/ Inserting Table with bootstrap classes
+/ -------------------------------------------
+
+%table.table.table-hover
+ %thead
+ %tr
+ %th Header 1
+ %th Header 2
+
+ %tr
+ %td Value1
+ %td value2
+
+ %tfoot
+ %tr
+ %td
+ Foot value
+
/ -------------------------------------------
/ Inline Ruby / Ruby interpolation
@@ -141,12 +187,33 @@ $ haml input_file.haml output_file.html
/ -------------------------------------------
/
- Use the colon to define Haml filters, one example of a filter you can
- use is :javascript, which can be used for writing inline js
+ Filters pass the block to another filtering program and return the result in Haml
+ To use a filter, type a colon and the name of the filter
+
+/ Markdown filter
+:markdown
+ # Header
+
+ Text **inside** the *block*
+
+/ The code above is compiled into
+<h1>Header</h1>
+<p>Text <strong>inside</strong> the <em>block</em></p>
+
+/ Javascript filter
:javascript
console.log('This is inline <script>');
+/ is compiled into
+<script>
+ console.log('This is inline <script>');
+</script>
+
+/
+ There are many types of filters (:markdown, :javascript, :coffee, :css, :ruby and so on)
+ Also you can define your own filters using Haml::Filters
+
```
## Additional resources