Project

huml

0.0
No commit activity in last 3 years
No release in over 3 years
Huml is to Haml what Scss is to Sass
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Development

>= 0
>= 0

Runtime

 Project Readme

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