Huml
Huml is to Haml what Scss is to Sass. Like the relationship between Sass and Scss, Huml uses braces for nesting structure when Haml uses indentations.
Basic Usage
Huml can be used from the command line or as part of a Ruby web framework. The first step is to install the gem:
gem install huml
After writing some Huml, you can run
huml document.huml
to compile it to HTML.
Formatting
The most basic element of Huml is a similar to Haml.
%tagname(attr1='value1' attr2='value2') = 'Content'
Adding class and id attributes uses the same syntax as the CSS too.
%tagname#id.class
If the element contains inner elements, you can use curly brace to wrap it
%ul {
%li = 'Salt'
%li = 'Pepper'
}
becomes
<ul>
<li>Salt</li>
<li>Pepper</li>
</ul>
You can also put plain text as a child of an element:
%p {
'Hello,'
'World!'
}
It's also possible to embed Ruby code into Haml documents. A hyphen, -, will run the code but not output the result.
You can even use control statements like if and while:
%p {
'Date/Time:'
- now = DateTime.now
%strong = "#{now}"
- if now > DateTime.parse("December 31, 2006")
'Happy new year!'
- end
}
Like strings in Ruby, double quote strings allow interpolation and single quote strings don't.
- @var = "string"
"here is a #{@var}"
becomes
here is a string
And
- @var = "string"
'no a string. #{@var}'
becomes
not a string. #{@var}
An Example
doctype 5
%html {
%head {
%script(type="text/javascript" src="app.js")
%link(href="app.css" rel="stylesheet" type="text/css" media="all")
}
%body {
%div.container {
%h3.header = "page header"
%p(style="background-color: #fff;") = "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
- for item in %w(hello world) do
%div = "interpolate #{item} here"
- end
"plain text is eligible"
}
}
}
License
MIT (X11) License 2014 shelling