diff options
| author | Simon Neveu <simon@animade.tv> | 2014-10-09 23:13:37 +0100 |
|---|---|---|
| committer | Simon Neveu <simon@animade.tv> | 2014-10-09 23:13:37 +0100 |
| commit | d1ef1771ad5448c3c004f1aec3e8b836df3cb96e (patch) | |
| tree | e8d07ed157347cc2fd14afd50a6a4aca9d06f7d0 /haml.html.markdown | |
| parent | 46f174fab100f31659f3141a9aeca137035e34b3 (diff) | |
Added filters, ruby interpolation and additional resources
Diffstat (limited to 'haml.html.markdown')
| -rw-r--r-- | haml.html.markdown | 82 |
1 files changed, 74 insertions, 8 deletions
diff --git a/haml.html.markdown b/haml.html.markdown index 9cde462e..47da2aee 100644 --- a/haml.html.markdown +++ b/haml.html.markdown @@ -7,7 +7,8 @@ contributors: 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. +inline code. It is a popular alternative to using rails templating +language (.erb) and allows you to embed ruby code into your markup. It aims to reduce repetition in your markup by closing tags for you based on the structure of the indents in your code. The result is @@ -19,7 +20,7 @@ markup that is well-structured, DRY, logical, and easier to read. / Comments / ------------------------------------------- -/ This is what a comment looks like haml +/ This is what a comment looks like haml. / To write a multi line comment, indent your commented code to be @@ -38,7 +39,6 @@ markup that is well-structured, DRY, logical, and easier to read. %nav / Notice no closing tags. The above code would output - <body> <header> <nav></nav> @@ -48,14 +48,25 @@ markup that is well-structured, DRY, logical, and easier to read. / Divs are the default elements so they can be written simply like this .foo -/ To add content to a tag, nest it +/ To add content to a tag, add the text directly after the declaration %h1 Headline copy -/ - To output a ruby value as the contents of the tag, use an equals sign followed - by the ruby code +/ To write multiline content, nest it instead +%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 ( &= ) +%p + &= "Yes & yes" + +/ which would output 'Yes & yes' -%h1= author.name +/ You can unescape html by using the bang and equals sign ( != ) +%p + != "This is how you write a paragraph tag <p></p>" + +/ which would output 'This is how you write a paragraph tag <p></p>' / Classes can be added to your tags either by chaining .classnames to the tag %div.foo.bar @@ -73,3 +84,58 @@ markup that is well-structured, DRY, logical, and easier to read. %div{:data => {:attribute => 'foo'}} +/ ------------------------------------------- +/ Inserting Ruby +/ ------------------------------------------- + +/ + To output a ruby value as the contents of a tag, use an equals sign followed + by the ruby code + +%h1= book.name + +%p + = book.author + = book.publisher + + +/ To run some ruby code without rendering it to the html, use a hyphen instead +- books = ['book one', 'book 2', 'book 3'] + +/ Allowing you to do all sorts of awesome, like ruby blocks +- books.shuffle.each_with_index do |book, index| + %h1= book + + if book do + %p This is a book + +/ + Again, no need to add the closing tags to the block, even for the ruby. + Indentation will take care of that for you. + + +/ ------------------------------------------- +/ Inline Ruby / Ruby interpolation +/ ------------------------------------------- + +/ Include a ruby variable in a line of plain text using #{} +%p Your highest scoring game is #{best_game} + + +/ ------------------------------------------- +/ Filters +/ ------------------------------------------- + +/ + 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 + + :javascript + console.log('This is inline <script>'); + +``` + +## Additional resources + +- [What is HAML?](http://haml.info/) - A good introduction that does a much better job of explaining how beneficial HAML can be. +- [Official Docs](http://www.ruby-doc.org/core-2.1.1/) - If you'd like to go a little deeper. |