info/learnxinyminutes-docs
1
0
Fork 0
mirror of https://github.com/adambard/learnxinyminutes-docs.git synced 2025-08-06 14:56:54 +02:00
Code Issues Releases Wiki Activity

Added filters, ruby interpolation and additional resources

Browse Source
This commit is contained in:
Simon Neveu
2014-10-09 23:13:37 +01:00
parent 46f174fab1
commit d1ef1771ad
1 changed files with 74 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
haml.html.markdown
View File

@@ -7,7 +7,8 @@ contributors:
Haml is a markup language predominantly used with Ruby that cleanly Haml is a markup language predominantly used with Ruby that cleanly
and simply describes the HTML of any web document without the use of 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 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 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 / 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 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 %nav
/ Notice no closing tags. The above code would output / Notice no closing tags. The above code would output
<body> <body>
<header> <header>
<nav></nav> <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 / Divs are the default elements so they can be written simply like this
.foo .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 %h1 Headline copy
/ / To write multiline content, nest it instead
To output a ruby value as the contents of the tag, use an equals sign followed %p
by the ruby code This is a lot of content that we could probably split onto two
separate lines.
%h1= author.name / You can escape html by using the ampersand and equals sign ( &= )
%p
&= "Yes & yes"
/ which would output 'Yes &amp; yes'
/ 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 / Classes can be added to your tags either by chaining .classnames to the tag
%div.foo.bar %div.foo.bar
@@ -73,3 +84,58 @@ markup that is well-structured, DRY, logical, and easier to read.
%div{:data => {:attribute => 'foo'}} %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.