Skip to content

Commit

Permalink
[haml/en] Add more information
Browse files Browse the repository at this point in the history
  • Loading branch information
Saugardas committed Sep 27, 2017
1 parent e27533f commit 938988b
Showing 1 changed file with 48 additions and 5 deletions.
53 changes: 48 additions & 5 deletions haml.html.markdown
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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
Expand Down Expand Up @@ -55,8 +58,18 @@ $ 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
Expand Down Expand Up @@ -97,6 +110,15 @@ $ 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
Expand All @@ -120,7 +142,7 @@ $ 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
Expand Down Expand Up @@ -166,12 +188,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 filter type colon and the name of the filter
/ Markdown filter
:markdown
# Header

Text **inside** *block*

/ The code above is compiled into
<h1>Header</h1>

<p>Text <strong>inside</strong> <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 own filter using Haml::Filters
```

## Additional resources
Expand Down

0 comments on commit 938988b

Please sign in to comment.