1
0
mirror of https://github.com/adambard/learnxinyminutes-docs.git synced 2025-08-12 09:44:24 +02:00

[haml/en] Add more information

This commit is contained in:
Vasiliy Petrov
2017-09-27 22:13:18 +03:00
parent e27533f7d1
commit 938988bd34

View File

@@ -3,6 +3,7 @@ language: haml
filename: learnhaml.haml filename: learnhaml.haml
contributors: contributors:
- ["Simon Neveu", "https://github.com/sneveu"] - ["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. 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. 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 input_file.haml output_file.html
```
```haml ```haml
@@ -55,8 +58,18 @@ $ haml input_file.haml output_file.html
</header> </header>
</body> </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 / To add content to a tag, add the text directly after the declaration
%h1 Headline copy %h1 Headline copy
@@ -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 / To write data-attributes, use the :data key with its value as another hash
%div{:data => {:attribute => 'foo'}} %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 / Inserting Ruby
@@ -120,7 +142,7 @@ $ haml input_file.haml output_file.html
- books.shuffle.each_with_index do |book, index| - books.shuffle.each_with_index do |book, index|
%h1= book %h1= book
if book do - if book do
%p This is a book %p This is a book
/ Adding ordered / unordered list / Adding ordered / unordered list
@@ -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 Filters pass the block to another filtering program and return the result in Haml
use is :javascript, which can be used for writing inline js 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 :javascript
console.log('This is inline <script>'); 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 ## Additional resources