mirror of
https://github.com/haml/haml.git
synced 2022-11-09 12:33:31 -05:00
Moving Haml reference stuff to the Haml module and out of README.
git-svn-id: svn://hamptoncatlin.com/haml/trunk@233 7063305b-7217-0410-af8c-cdc13e5119b9
This commit is contained in:
parent
acada92d3c
commit
64ee1f0dbb
4 changed files with 706 additions and 647 deletions
725
README
725
README
|
@ -1,662 +1,95 @@
|
||||||
= Haml (XHTML Abstraction Markup Language)
|
= Haml and Sass
|
||||||
|
|
||||||
Haml is a markup language
|
Haml and Sass are templating engines
|
||||||
that's used to cleanly and simply describe the XHTML of any web document,
|
for the two most common types of documents on the web:
|
||||||
without the use of inline code.
|
HTML and CSS, respectively.
|
||||||
Haml functions as a replacement
|
They are designed to make it both easier and more pleasant
|
||||||
for inline page templating systems such as PHP, RHTML, and ASP.
|
to cose HTML and CSS documents,
|
||||||
However, Haml avoids the need for explicitly coding XHTML into the template,
|
by eliminating redundancy,
|
||||||
because it is actually an abstract description of the XHTML,
|
reflecting the underlying structure that the document represents,
|
||||||
with some code to generate dynamic content.
|
and providing elegant, easily understandable, and powerful syntax.
|
||||||
|
|
||||||
== Features
|
== Formatting
|
||||||
|
|
||||||
* Whitespace active
|
=== Haml
|
||||||
* Well-formatted markup
|
|
||||||
* DRY
|
The most basic element of Haml
|
||||||
* Follows CSS conventions
|
is a shorthand for creating HTML tags:
|
||||||
* Interpolates Ruby code
|
|
||||||
* Implements Rails templates with the .haml extension
|
%tagname{ :attr1 => 'value1', :attr2 => 'value2' } Contents
|
||||||
|
|
||||||
|
No end-tag is needed; Haml handles that automatically.
|
||||||
|
Adding <tt>class</tt> and <tt>id</tt> attributes is even easier.
|
||||||
|
Haml uses the same syntax as the CSS that styles the document:
|
||||||
|
|
||||||
|
%tagname#id.class
|
||||||
|
|
||||||
|
In fact, when you're using the <tt><div></tt> tag,
|
||||||
|
it becomes <em>even easier</em>.
|
||||||
|
Because <tt><div></tt> is such a common element,
|
||||||
|
a tag without a name defaults to a div. So
|
||||||
|
|
||||||
|
#foo Hello!
|
||||||
|
|
||||||
|
becomes
|
||||||
|
|
||||||
|
<div id='foo'>Hello!</foo>
|
||||||
|
|
||||||
|
Haml uses indentation
|
||||||
|
to bring the individual elements to represent the HTML structure.
|
||||||
|
A tag's children are indented two spaces more than the parent tag.
|
||||||
|
Again, a closing tag is automatically added.
|
||||||
|
For example:
|
||||||
|
|
||||||
|
%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 even possible to embed Ruby code into Haml documents.
|
||||||
|
An equals sign, <tt>=</tt>, will output the result of the code.
|
||||||
|
A hyphen, <tt>-</tt>, will run the code but not output the result.
|
||||||
|
You can even use control statements
|
||||||
|
like <tt>if</tt> and <tt>while</tt>:
|
||||||
|
|
||||||
|
%p
|
||||||
|
Date/Time:
|
||||||
|
- now = DateTime.now
|
||||||
|
%strong= now
|
||||||
|
- if now > DateTime.parse("December 31, 2006")
|
||||||
|
= "Happy new " + "year!"
|
||||||
|
|
||||||
|
Haml provides far more tools than those presented here.
|
||||||
|
Check out the reference documentation in the Haml module.
|
||||||
|
|
||||||
|
=== Sass
|
||||||
|
|
||||||
|
*add docs*
|
||||||
|
|
||||||
== Authors
|
== Authors
|
||||||
|
|
||||||
Haml was originally created by Hampton Catlin (hcatlin).
|
Haml and Sass are designed by Hampton Catlin (hcatlin).
|
||||||
Help with the Ruby On Rails implementation and much of the documentation
|
Help with the Ruby On Rails implementation and much of the documentation
|
||||||
by Jeff Hardy (packagethief).
|
by Jeff Hardy (packagethief).
|
||||||
|
|
||||||
Nathan Weizenbaum (Nex3) contributed the buffered-engine code,
|
Nathan Weizenbaum (Nex3) contributed the buffered-engine code to Haml,
|
||||||
along with many other enhancements
|
along with many other enhancements
|
||||||
(including the silent-line syntax: "-").
|
(including the silent-line syntax: "-").
|
||||||
|
He continues to actively work on both Haml and Sass.
|
||||||
|
|
||||||
If you use this software, you must pay Hampton a compliment.
|
If you use this software, you must pay Hampton a compliment.
|
||||||
Say something nice about it.
|
Say something nice about it.
|
||||||
Beyond that, the implementation is licensed under the MIT License.
|
Beyond that, the implementation is licensed under the MIT License.
|
||||||
Ok, fine, I guess that means compliments aren't *required*.
|
Ok, fine, I guess that means compliments aren't *required*.
|
||||||
|
|
||||||
== Formatting
|
|
||||||
|
|
||||||
Haml is sensitive to spacing and indentation;
|
|
||||||
it uses nesting to convey structure.
|
|
||||||
When you want an element to have children,
|
|
||||||
indent the lines below it using two spaces.
|
|
||||||
Remember, spaces are not the same as tabs.
|
|
||||||
For example:
|
|
||||||
|
|
||||||
#contact
|
|
||||||
%h1 Eugene Mumbai
|
|
||||||
%ul.info
|
|
||||||
%li.login eugene
|
|
||||||
%li.email eugene@example.com
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
<div id='contact'>
|
|
||||||
<h1>Eugene Mumbai</h1>
|
|
||||||
<ul class='info'>
|
|
||||||
<li class='login'>eugene</li>
|
|
||||||
<li class='email'>eugene@example.com</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
== Characters with meaning to Haml
|
|
||||||
|
|
||||||
Various characters, when placed at a certain point in a line,
|
|
||||||
instruct Haml to render different types of things.
|
|
||||||
|
|
||||||
=== XHTML Tags
|
|
||||||
|
|
||||||
These characters render XHTML tags.
|
|
||||||
|
|
||||||
==== %
|
|
||||||
|
|
||||||
|
|
||||||
This element is placed at the beginning of a line.
|
|
||||||
It's followed immediately by the name of an element,
|
|
||||||
then optionally by modifiers (see below), a space,
|
|
||||||
and text to be rendered inside the element.
|
|
||||||
It creates an element in the form of <tt><element></element></tt>.
|
|
||||||
For example:
|
|
||||||
|
|
||||||
%one
|
|
||||||
%two
|
|
||||||
%three Hey there
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
<one>
|
|
||||||
<two>
|
|
||||||
<three>Hey there</three>
|
|
||||||
</two>
|
|
||||||
</one>
|
|
||||||
|
|
||||||
Any string is a valid element name;
|
|
||||||
Haml will automatically generate opening and closing tags for any element.
|
|
||||||
|
|
||||||
==== {}
|
|
||||||
|
|
||||||
Brackets represent a Ruby hash
|
|
||||||
that is used for specifying the attributes of an element.
|
|
||||||
It is literally evaluated as a Ruby hash,
|
|
||||||
so logic will work in it and local variables may be used.
|
|
||||||
Quote characters within the attribute
|
|
||||||
will be replaced by appropriate escape sequences.
|
|
||||||
The hash is placed after the tag is defined.
|
|
||||||
For example:
|
|
||||||
|
|
||||||
%head{ :name => "doc_head" }
|
|
||||||
%script{ 'type' => "text/" + "javascript",
|
|
||||||
:src => "javascripts/script_#{2 + 7}" }
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
<head name="doc_head">
|
|
||||||
<script src='javascripts/script_9' type='text/javascript'>
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
==== []
|
|
||||||
|
|
||||||
Square brackets follow a tag definition and contain a Ruby object
|
|
||||||
that is used to set the class and id of that tag.
|
|
||||||
The class is set to the object's class
|
|
||||||
(transformed to use underlines rather than camel case)
|
|
||||||
and the id is set to the object's class, followed by its id.
|
|
||||||
Because the id of an object is normally an obscure implementation detail,
|
|
||||||
this is most useful for elements that represent instances of Models.
|
|
||||||
For example:
|
|
||||||
|
|
||||||
# file: app/controllers/users_controller.rb
|
|
||||||
|
|
||||||
def show
|
|
||||||
@user = CrazyUser.find(15)
|
|
||||||
end
|
|
||||||
|
|
||||||
# file: app/views/users/show.haml
|
|
||||||
|
|
||||||
%div[@user]
|
|
||||||
%bar[290]/
|
|
||||||
Hello!
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
<div class="crazy_user" id="crazy_user_15">
|
|
||||||
<bar class="fixnum" id="fixnum_581" />
|
|
||||||
Hello!
|
|
||||||
</div>
|
|
||||||
|
|
||||||
This is based off of DHH's SimplyHelpful syntax,
|
|
||||||
as presented at RailsConf Europe 2006.
|
|
||||||
|
|
||||||
==== /
|
|
||||||
|
|
||||||
The forward slash character, when placed at the end of a tag definition,
|
|
||||||
causes the tag to be self-closed.
|
|
||||||
For example:
|
|
||||||
|
|
||||||
%br/
|
|
||||||
%meta{:http-equiv => 'Content-Type', :content => 'text/html'}/
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
<br />
|
|
||||||
<meta http-equiv='Content-Type' content='text/html' />
|
|
||||||
|
|
||||||
==== . and #
|
|
||||||
|
|
||||||
The period and pound sign are borrowed from CSS.
|
|
||||||
They are used as shortcuts to specify the <tt>class</tt>
|
|
||||||
and <tt>id</tt> attributes of an element, respectively.
|
|
||||||
Multiple class names can be specified in a similar way to CSS,
|
|
||||||
by chaining the class names together with periods.
|
|
||||||
They are placed immediately after the tag and before an attributes hash.
|
|
||||||
For example:
|
|
||||||
|
|
||||||
div#things
|
|
||||||
%span#rice Chicken Fried
|
|
||||||
%p.beans{ :food => 'true' } The magical fruit
|
|
||||||
%h1.class.otherclass#id La La La
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
<div id='things'>
|
|
||||||
<span id='rice'>Chicken Fried</span>
|
|
||||||
<p class='beans' food='true'>The magical fruit</p>
|
|
||||||
<h1 class='class' id='id'>La La La</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
And,
|
|
||||||
|
|
||||||
#content
|
|
||||||
.articles
|
|
||||||
.article.title
|
|
||||||
Doogie Howser Comes Out
|
|
||||||
.article.date
|
|
||||||
2006-11-05
|
|
||||||
.article.entry
|
|
||||||
Neil Patrick Harris would like to dispel any rumors that he is straight
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
<div id="content">
|
|
||||||
<div class="articles">
|
|
||||||
<div class="article title">Doogie Howser Comes Out</div>
|
|
||||||
<div class="article date">2006-11-05</div>
|
|
||||||
<div class="article entry">
|
|
||||||
Neil Patrick Harris would like to dispel any rumors that he is straight
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
==== Implicit Div Elements
|
|
||||||
|
|
||||||
Because the div element is used so often, it is the default element.
|
|
||||||
If you only define a class and/or id using the <tt>.</tt> or <tt>#</tt> syntax,
|
|
||||||
a div element is automatically used.
|
|
||||||
For example:
|
|
||||||
|
|
||||||
#collection
|
|
||||||
.item
|
|
||||||
.description What a cool item!
|
|
||||||
|
|
||||||
is the same as:
|
|
||||||
|
|
||||||
%div{:id => collection}
|
|
||||||
%div{:class => 'item'}
|
|
||||||
%div{:class => 'description'} What a cool item!
|
|
||||||
|
|
||||||
and is compiled to:
|
|
||||||
|
|
||||||
<div id='collection'>
|
|
||||||
<div class='item'>Broken record album</div>
|
|
||||||
<div class='description'>What a cool item!</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
==== = and ~
|
|
||||||
|
|
||||||
<tt>=</tt> and <tt>~</tt> are placed at the end of a tag definition,
|
|
||||||
after class, id, and attribute declarations.
|
|
||||||
They're just shortcuts for inserting Ruby code into an element.
|
|
||||||
They work the same as <tt>=</tt> and <tt>~</tt> without a tag;
|
|
||||||
see below for documentation of those.
|
|
||||||
However, if the result is short enough,
|
|
||||||
it is displayed entirely on one line.
|
|
||||||
For example:
|
|
||||||
|
|
||||||
%p= "hello"
|
|
||||||
%h1~ 1 + 2
|
|
||||||
|
|
||||||
is not quite the same as:
|
|
||||||
|
|
||||||
%p
|
|
||||||
= "hello"
|
|
||||||
%h1
|
|
||||||
~ 1 + 2
|
|
||||||
|
|
||||||
It's compiled to:
|
|
||||||
|
|
||||||
<p>hello</p>
|
|
||||||
<h1>3</h1>
|
|
||||||
|
|
||||||
=== XHTML Helpers
|
|
||||||
|
|
||||||
==== No Special Character
|
|
||||||
|
|
||||||
If no special character appears at the beginning of a line,
|
|
||||||
the line is rendered as plain text.
|
|
||||||
For example:
|
|
||||||
|
|
||||||
%gee
|
|
||||||
%whiz
|
|
||||||
Wow this is cool!
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
<gee>
|
|
||||||
<whiz>
|
|
||||||
Wow this is cool!
|
|
||||||
</whiz>
|
|
||||||
</gee>
|
|
||||||
|
|
||||||
==== !!!
|
|
||||||
|
|
||||||
When describing XHTML documents with Haml,
|
|
||||||
you can have a document type or XML prolog generated automatically
|
|
||||||
by including the characters <tt>!!!</tt>.
|
|
||||||
For example:
|
|
||||||
|
|
||||||
!!! XML
|
|
||||||
!!!
|
|
||||||
%html
|
|
||||||
%head
|
|
||||||
%title Myspace
|
|
||||||
%body
|
|
||||||
%h1 I am the international space station
|
|
||||||
%p Sign my guestbook
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
<?xml version="1.0" encoding="utf-8" ?>
|
|
||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Myspace</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>I am the international space station</h1>
|
|
||||||
<p>Sign my guestbook</p>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
You can also specify the version and type of XHTML after the <tt>!!!</tt>.
|
|
||||||
XHTML 1.0 Strict, Transitional, and Frameset and XHTML 1.1 are supported.
|
|
||||||
The default version is 1.0 and the default type is Transitional.
|
|
||||||
For example:
|
|
||||||
|
|
||||||
!!! 1.1
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
|
||||||
|
|
||||||
and
|
|
||||||
|
|
||||||
!!! Strict
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
||||||
|
|
||||||
If you're not using the UTF-8 characterset for your document,
|
|
||||||
you can specify which encoding should appear
|
|
||||||
in the XML prolog in a similar way.
|
|
||||||
For example:
|
|
||||||
|
|
||||||
!!! XML iso-8859-1
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
<?xml version="1.0" encoding="iso-8859-1" ?>
|
|
||||||
|
|
||||||
==== /
|
|
||||||
|
|
||||||
The forward slash character, when placed at the beginning of a line,
|
|
||||||
wraps all text after it in an HTML comment.
|
|
||||||
For example:
|
|
||||||
|
|
||||||
%billabong
|
|
||||||
/ This is the billabong element
|
|
||||||
I like billabongs!
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
<billabong>
|
|
||||||
<!-- This is the billabong element -->
|
|
||||||
I like billabongs!
|
|
||||||
</billabong>
|
|
||||||
|
|
||||||
The forward slash can also wrap indented sections of code. For example:
|
|
||||||
|
|
||||||
/
|
|
||||||
%p This doesn't render...
|
|
||||||
%div
|
|
||||||
%h1 Because it's commented out!
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
<!--
|
|
||||||
<p>This doesn't render...</p>
|
|
||||||
<div>
|
|
||||||
<h1>Because it's commented out!</h1>
|
|
||||||
</div>
|
|
||||||
-->
|
|
||||||
|
|
||||||
You can also use Internet Explorer conditional comments
|
|
||||||
(about)[http://www.quirksmode.org/css/condcom.html]
|
|
||||||
by enclosing the condition in square brackets after the <tt>/</tt>.
|
|
||||||
For example:
|
|
||||||
|
|
||||||
/[if IE]
|
|
||||||
%a{ :href => 'http://www.mozilla.com/en-US/firefox/' }
|
|
||||||
%h1 Get Firefox
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
<!--[if IE]>
|
|
||||||
<a href='http://www.mozilla.com/en-US/firefox/'>
|
|
||||||
<h1>Get Firefox</h1>
|
|
||||||
</a>
|
|
||||||
<![endif]-->
|
|
||||||
|
|
||||||
==== \
|
|
||||||
|
|
||||||
The backslash character escapes the first character of a line,
|
|
||||||
allowing use of otherwise interpreted characters as plain text.
|
|
||||||
For example:
|
|
||||||
|
|
||||||
%title
|
|
||||||
= @title
|
|
||||||
\- MySite
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
<title>
|
|
||||||
MyPage
|
|
||||||
- MySite
|
|
||||||
</title>
|
|
||||||
|
|
||||||
==== |
|
|
||||||
|
|
||||||
The pipe character designates a multiline string.
|
|
||||||
It's placed at the end of a line
|
|
||||||
and means that all following lines that end with <tt>|</tt>
|
|
||||||
will be evaluated as though they were on the same line.
|
|
||||||
For example:
|
|
||||||
|
|
||||||
%whoo
|
|
||||||
%hoo I think this might get |
|
|
||||||
pretty long so I should |
|
|
||||||
probably make it |
|
|
||||||
multiline so it doesn't |
|
|
||||||
look awful. |
|
|
||||||
%p This is short.
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
%hoo I think this might get |
|
|
||||||
pretty long so I should |
|
|
||||||
probably make it |
|
|
||||||
multiline so it doesn't |
|
|
||||||
look awful. |
|
|
||||||
|
|
||||||
=== Ruby evaluators
|
|
||||||
|
|
||||||
==== =
|
|
||||||
|
|
||||||
The equals character is followed by Ruby code,
|
|
||||||
which is evaluated and the output inserted into the document as plain text.
|
|
||||||
For example:
|
|
||||||
|
|
||||||
%p
|
|
||||||
= ['hi', 'there', 'reader!'].join " "
|
|
||||||
= "yo"
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
<p>
|
|
||||||
hi there reader!
|
|
||||||
yo
|
|
||||||
</p>
|
|
||||||
|
|
||||||
==== ~
|
|
||||||
|
|
||||||
The tilde character works the same as the equals character,
|
|
||||||
but the output is modified in such a way
|
|
||||||
that newlines in whitespace-sensitive elements work properly.
|
|
||||||
For example:
|
|
||||||
|
|
||||||
%foo
|
|
||||||
= "Woah <pre> this is \n</pre> crazy"
|
|
||||||
%foo2
|
|
||||||
~ "Woah <pre> this is \n</pre> crazy"
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
<foo>
|
|
||||||
Woah <pre> this is
|
|
||||||
</pre> crazy
|
|
||||||
</foo>
|
|
||||||
<foo2>
|
|
||||||
Woah <pre> this is 
</pre> crazy
|
|
||||||
</foo2>
|
|
||||||
|
|
||||||
If the ~ character isn't followed by text,
|
|
||||||
it doesn't evaluate Ruby at all.
|
|
||||||
Instead, an indented section following it will be rendered
|
|
||||||
in a whitespace-sensitive manner,
|
|
||||||
using HTML encodings for newlines.
|
|
||||||
For example:
|
|
||||||
|
|
||||||
For example:
|
|
||||||
|
|
||||||
.house
|
|
||||||
%pre
|
|
||||||
~
|
|
||||||
/^^^\
|
|
||||||
|[] []|
|
|
||||||
|_____|
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
<div class="house">
|
|
||||||
<pre>
|
|
||||||

 /^^^\
|[] []|
|_____|

|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
==== -
|
|
||||||
|
|
||||||
The hyphen character makes the text following it into "silent script":
|
|
||||||
Ruby script that is evaluated, but not output.
|
|
||||||
|
|
||||||
<b>It is not recommended that you use this widely;
|
|
||||||
almost all processing code and logic should be restricted
|
|
||||||
to the Controller, the Helper, or partials.</b>
|
|
||||||
|
|
||||||
For example:
|
|
||||||
|
|
||||||
- foo = "hello"
|
|
||||||
- foo << " there"
|
|
||||||
- foo << " you!"
|
|
||||||
%p= foo
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
<p>
|
|
||||||
hello there you!
|
|
||||||
</p>
|
|
||||||
|
|
||||||
===== Blocks
|
|
||||||
|
|
||||||
Ruby blocks, like XHTML tags, don't need to be explicitly closed in Haml.
|
|
||||||
Rather, they're automatically closed, based on indentation.
|
|
||||||
A block begins whenever the indentation is increased
|
|
||||||
after a silent script command.
|
|
||||||
It ends when the indentation decreases
|
|
||||||
(as long as it's not an +else+ clause or something similar).
|
|
||||||
For example:
|
|
||||||
|
|
||||||
- (42...47).each do |i|
|
|
||||||
%p= i
|
|
||||||
%p See, I can count!
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
<p>
|
|
||||||
42
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
43
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
44
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
45
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
46
|
|
||||||
</p>
|
|
||||||
|
|
||||||
Another example:
|
|
||||||
|
|
||||||
%p
|
|
||||||
- case 2
|
|
||||||
- when 1
|
|
||||||
= "1!"
|
|
||||||
- when 2
|
|
||||||
= "2?"
|
|
||||||
- when 3
|
|
||||||
= "3."
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
<p>
|
|
||||||
2?
|
|
||||||
</p>
|
|
||||||
|
|
||||||
== Using Haml as a Rails plugin
|
|
||||||
|
|
||||||
Write Rails templates with the .haml extension.
|
|
||||||
For example:
|
|
||||||
|
|
||||||
# file: app/views/movies/teen_wolf.haml
|
|
||||||
|
|
||||||
%html
|
|
||||||
%head
|
|
||||||
%title= "Teen Wolf (1985)"
|
|
||||||
%body
|
|
||||||
#contents
|
|
||||||
%h1 "A highschooler discovers that he is a werewolf"
|
|
||||||
%ul.cast
|
|
||||||
%li "Scott Howard"
|
|
||||||
%li "Rupert 'Stiles' Stilinski"
|
|
||||||
%li "Lisa 'Boof' Marconi"
|
|
||||||
%li "Lewis"
|
|
||||||
|
|
||||||
is compiled to:
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Teen Wolf (1985)</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id='contents'>
|
|
||||||
<h1>A highschooler discovers that he is a werewolf</h1>
|
|
||||||
<ul class='cast'>
|
|
||||||
<li>Scott Howard</li>
|
|
||||||
<li>Rupert 'Stiles' Stilinski</li>
|
|
||||||
<li>Lisa 'Boof' Marconi</li>
|
|
||||||
<li>Lewis</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
You can access instance variables in Haml templates
|
|
||||||
the same way you do in ERb templates.
|
|
||||||
Helper methods are also available in Haml templates.
|
|
||||||
For example:
|
|
||||||
|
|
||||||
# file: app/controllers/movies_controller.rb
|
|
||||||
|
|
||||||
class MoviesController < ApplicationController
|
|
||||||
def index
|
|
||||||
@title = "Teen Wolf"
|
|
||||||
end
|
|
||||||
end
|
|
||||||
|
|
||||||
# file: app/views/movies/index.haml
|
|
||||||
|
|
||||||
#content
|
|
||||||
.title
|
|
||||||
%h1= @title
|
|
||||||
= link_to 'Home', home_url
|
|
||||||
|
|
||||||
may be compiled to:
|
|
||||||
|
|
||||||
<div id='content'>
|
|
||||||
<div class='title'>
|
|
||||||
<h1>Teen Wolf</h1>
|
|
||||||
<a href='/'>Home</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
=== Setting Options
|
|
||||||
|
|
||||||
Options can be set by setting the hash <tt>Haml::Template.options</tt>
|
|
||||||
from <tt>environment.rb</tt>.
|
|
||||||
Available options are:
|
|
||||||
|
|
||||||
[<tt>:suppress_eval</tt>] Whether or not attribute hashes and Ruby scripts
|
|
||||||
designated by <tt>=</tt> or <tt>~</tt> should be
|
|
||||||
evaluated. If this is true, said scripts are
|
|
||||||
rendered as empty strings. Defaults to false.
|
|
||||||
|
|
||||||
[<tt>:precompiled</tt>] A string containing a precompiled Haml template.
|
|
||||||
If this is passed, <tt>template</tt> is ignored
|
|
||||||
and no precompilation is done.
|
|
||||||
|
|
||||||
[<tt>:attr_wrapper</tt>] The character that should wrap element attributes.
|
|
||||||
This defaults to <tt>'</tt> (an apostrophe). Characters
|
|
||||||
of this type within the attributes will be escaped
|
|
||||||
(e.g. by replacing them with <tt>'</tt>) if
|
|
||||||
the character is an apostrophe or a quotation mark.
|
|
||||||
|
|
||||||
[<tt>:locals</tt>] The local variables that will be available within the
|
|
||||||
template. For instance, if <tt>:locals</tt> is
|
|
||||||
<tt>{ :foo => "bar" }</tt>, then within the template,
|
|
||||||
<tt>= foo</tt> will produce <tt>bar</tt>.
|
|
||||||
|
|
||||||
---
|
|
||||||
Copyright (c) 2006 Hampton Catlin
|
|
||||||
Licensed under the MIT License
|
|
||||||
|
|
2
Rakefile
2
Rakefile
|
@ -94,7 +94,7 @@ unless ARGV[0] == 'benchmark'
|
||||||
require 'rake/rdoctask'
|
require 'rake/rdoctask'
|
||||||
|
|
||||||
rdoc_task = Proc.new do |rdoc|
|
rdoc_task = Proc.new do |rdoc|
|
||||||
rdoc.title = 'Haml'
|
rdoc.title = 'Haml/Sass'
|
||||||
rdoc.options << '--line-numbers' << '--inline-source'
|
rdoc.options << '--line-numbers' << '--inline-source'
|
||||||
rdoc.rdoc_files.include('README')
|
rdoc.rdoc_files.include('README')
|
||||||
rdoc.rdoc_files.include('lib/**/*.rb')
|
rdoc.rdoc_files.include('lib/**/*.rb')
|
||||||
|
|
623
lib/haml.rb
623
lib/haml.rb
|
@ -1,3 +1,626 @@
|
||||||
dir = File.dirname(__FILE__)
|
dir = File.dirname(__FILE__)
|
||||||
$LOAD_PATH << dir unless $LOAD_PATH.include?(dir)
|
$LOAD_PATH << dir unless $LOAD_PATH.include?(dir)
|
||||||
|
|
||||||
|
# = Haml (XHTML Abstraction Markup Language)
|
||||||
|
#
|
||||||
|
# Haml is a markup language
|
||||||
|
# that's used to cleanly and simply describe the XHTML of any web document,
|
||||||
|
# without the use of inline code.
|
||||||
|
# Haml functions as a replacement
|
||||||
|
# for inline page templating systems such as PHP, RHTML, and ASP.
|
||||||
|
# However, Haml avoids the need for explicitly coding XHTML into the template,
|
||||||
|
# because it is actually an abstract description of the XHTML,
|
||||||
|
# with some code to generate dynamic content.
|
||||||
|
#
|
||||||
|
# == Features
|
||||||
|
#
|
||||||
|
# * Whitespace active
|
||||||
|
# * Well-formatted markup
|
||||||
|
# * DRY
|
||||||
|
# * Follows CSS conventions
|
||||||
|
# * Interpolates Ruby code
|
||||||
|
# * Implements Rails templates with the .haml extension
|
||||||
|
#
|
||||||
|
#
|
||||||
|
# == Characters with meaning to Haml
|
||||||
|
#
|
||||||
|
# Various characters, when placed at a certain point in a line,
|
||||||
|
# instruct Haml to render different types of things.
|
||||||
|
#
|
||||||
|
# === XHTML Tags
|
||||||
|
#
|
||||||
|
# These characters render XHTML tags.
|
||||||
|
#
|
||||||
|
# ==== %
|
||||||
|
#
|
||||||
|
#
|
||||||
|
# This element is placed at the beginning of a line.
|
||||||
|
# It's followed immediately by the name of an element,
|
||||||
|
# then optionally by modifiers (see below), a space,
|
||||||
|
# and text to be rendered inside the element.
|
||||||
|
# It creates an element in the form of <tt><element></element></tt>.
|
||||||
|
# For example:
|
||||||
|
#
|
||||||
|
# %one
|
||||||
|
# %two
|
||||||
|
# %three Hey there
|
||||||
|
#
|
||||||
|
# is compiled to:
|
||||||
|
#
|
||||||
|
# <one>
|
||||||
|
# <two>
|
||||||
|
# <three>Hey there</three>
|
||||||
|
# </two>
|
||||||
|
# </one>
|
||||||
|
#
|
||||||
|
# Any string is a valid element name;
|
||||||
|
# Haml will automatically generate opening and closing tags for any element.
|
||||||
|
#
|
||||||
|
# ==== {}
|
||||||
|
#
|
||||||
|
# Brackets represent a Ruby hash
|
||||||
|
# that is used for specifying the attributes of an element.
|
||||||
|
# It is literally evaluated as a Ruby hash,
|
||||||
|
# so logic will work in it and local variables may be used.
|
||||||
|
# Quote characters within the attribute
|
||||||
|
# will be replaced by appropriate escape sequences.
|
||||||
|
# The hash is placed after the tag is defined.
|
||||||
|
# For example:
|
||||||
|
#
|
||||||
|
# %head{ :name => "doc_head" }
|
||||||
|
# %script{ 'type' => "text/" + "javascript",
|
||||||
|
# :src => "javascripts/script_#{2 + 7}" }
|
||||||
|
#
|
||||||
|
# is compiled to:
|
||||||
|
#
|
||||||
|
# <head name="doc_head">
|
||||||
|
# <script src='javascripts/script_9' type='text/javascript'>
|
||||||
|
# </script>
|
||||||
|
# </head>
|
||||||
|
#
|
||||||
|
# ==== []
|
||||||
|
#
|
||||||
|
# Square brackets follow a tag definition and contain a Ruby object
|
||||||
|
# that is used to set the class and id of that tag.
|
||||||
|
# The class is set to the object's class
|
||||||
|
# (transformed to use underlines rather than camel case)
|
||||||
|
# and the id is set to the object's class, followed by its id.
|
||||||
|
# Because the id of an object is normally an obscure implementation detail,
|
||||||
|
# this is most useful for elements that represent instances of Models.
|
||||||
|
# For example:
|
||||||
|
#
|
||||||
|
# # file: app/controllers/users_controller.rb
|
||||||
|
#
|
||||||
|
# def show
|
||||||
|
# @user = CrazyUser.find(15)
|
||||||
|
# end
|
||||||
|
#
|
||||||
|
# # file: app/views/users/show.haml
|
||||||
|
#
|
||||||
|
# %div[@user]
|
||||||
|
# %bar[290]/
|
||||||
|
# Hello!
|
||||||
|
#
|
||||||
|
# is compiled to:
|
||||||
|
#
|
||||||
|
# <div class="crazy_user" id="crazy_user_15">
|
||||||
|
# <bar class="fixnum" id="fixnum_581" />
|
||||||
|
# Hello!
|
||||||
|
# </div>
|
||||||
|
#
|
||||||
|
# This is based off of DHH's SimplyHelpful syntax,
|
||||||
|
# as presented at RailsConf Europe 2006.
|
||||||
|
#
|
||||||
|
# ==== /
|
||||||
|
#
|
||||||
|
# The forward slash character, when placed at the end of a tag definition,
|
||||||
|
# causes the tag to be self-closed.
|
||||||
|
# For example:
|
||||||
|
#
|
||||||
|
# %br/
|
||||||
|
# %meta{:http-equiv => 'Content-Type', :content => 'text/html'}/
|
||||||
|
#
|
||||||
|
# is compiled to:
|
||||||
|
#
|
||||||
|
# <br />
|
||||||
|
# <meta http-equiv='Content-Type' content='text/html' />
|
||||||
|
#
|
||||||
|
# ==== . and #
|
||||||
|
#
|
||||||
|
# The period and pound sign are borrowed from CSS.
|
||||||
|
# They are used as shortcuts to specify the <tt>class</tt>
|
||||||
|
# and <tt>id</tt> attributes of an element, respectively.
|
||||||
|
# Multiple class names can be specified in a similar way to CSS,
|
||||||
|
# by chaining the class names together with periods.
|
||||||
|
# They are placed immediately after the tag and before an attributes hash.
|
||||||
|
# For example:
|
||||||
|
#
|
||||||
|
# div#things
|
||||||
|
# %span#rice Chicken Fried
|
||||||
|
# %p.beans{ :food => 'true' } The magical fruit
|
||||||
|
# %h1.class.otherclass#id La La La
|
||||||
|
#
|
||||||
|
# is compiled to:
|
||||||
|
#
|
||||||
|
# <div id='things'>
|
||||||
|
# <span id='rice'>Chicken Fried</span>
|
||||||
|
# <p class='beans' food='true'>The magical fruit</p>
|
||||||
|
# <h1 class='class' id='id'>La La La</h1>
|
||||||
|
# </div>
|
||||||
|
#
|
||||||
|
# And,
|
||||||
|
#
|
||||||
|
# #content
|
||||||
|
# .articles
|
||||||
|
# .article.title
|
||||||
|
# Doogie Howser Comes Out
|
||||||
|
# .article.date
|
||||||
|
# 2006-11-05
|
||||||
|
# .article.entry
|
||||||
|
# Neil Patrick Harris would like to dispel any rumors that he is straight
|
||||||
|
#
|
||||||
|
# is compiled to:
|
||||||
|
#
|
||||||
|
# <div id="content">
|
||||||
|
# <div class="articles">
|
||||||
|
# <div class="article title">Doogie Howser Comes Out</div>
|
||||||
|
# <div class="article date">2006-11-05</div>
|
||||||
|
# <div class="article entry">
|
||||||
|
# Neil Patrick Harris would like to dispel any rumors that he is straight
|
||||||
|
# </div>
|
||||||
|
# </div>
|
||||||
|
# </div>
|
||||||
|
#
|
||||||
|
# ==== Implicit Div Elements
|
||||||
|
#
|
||||||
|
# Because the div element is used so often, it is the default element.
|
||||||
|
# If you only define a class and/or id using the <tt>.</tt> or <tt>#</tt> syntax,
|
||||||
|
# a div element is automatically used.
|
||||||
|
# For example:
|
||||||
|
#
|
||||||
|
# #collection
|
||||||
|
# .item
|
||||||
|
# .description What a cool item!
|
||||||
|
#
|
||||||
|
# is the same as:
|
||||||
|
#
|
||||||
|
# %div{:id => collection}
|
||||||
|
# %div{:class => 'item'}
|
||||||
|
# %div{:class => 'description'} What a cool item!
|
||||||
|
#
|
||||||
|
# and is compiled to:
|
||||||
|
#
|
||||||
|
# <div id='collection'>
|
||||||
|
# <div class='item'>Broken record album</div>
|
||||||
|
# <div class='description'>What a cool item!</div>
|
||||||
|
# </div>
|
||||||
|
#
|
||||||
|
# ==== = and ~
|
||||||
|
#
|
||||||
|
# <tt>=</tt> and <tt>~</tt> are placed at the end of a tag definition,
|
||||||
|
# after class, id, and attribute declarations.
|
||||||
|
# They're just shortcuts for inserting Ruby code into an element.
|
||||||
|
# They work the same as <tt>=</tt> and <tt>~</tt> without a tag;
|
||||||
|
# see below for documentation of those.
|
||||||
|
# However, if the result is short enough,
|
||||||
|
# it is displayed entirely on one line.
|
||||||
|
# For example:
|
||||||
|
#
|
||||||
|
# %p= "hello"
|
||||||
|
# %h1~ 1 + 2
|
||||||
|
#
|
||||||
|
# is not quite the same as:
|
||||||
|
#
|
||||||
|
# %p
|
||||||
|
# = "hello"
|
||||||
|
# %h1
|
||||||
|
# ~ 1 + 2
|
||||||
|
#
|
||||||
|
# It's compiled to:
|
||||||
|
#
|
||||||
|
# <p>hello</p>
|
||||||
|
# <h1>3</h1>
|
||||||
|
#
|
||||||
|
# === XHTML Helpers
|
||||||
|
#
|
||||||
|
# ==== No Special Character
|
||||||
|
#
|
||||||
|
# If no special character appears at the beginning of a line,
|
||||||
|
# the line is rendered as plain text.
|
||||||
|
# For example:
|
||||||
|
#
|
||||||
|
# %gee
|
||||||
|
# %whiz
|
||||||
|
# Wow this is cool!
|
||||||
|
#
|
||||||
|
# is compiled to:
|
||||||
|
#
|
||||||
|
# <gee>
|
||||||
|
# <whiz>
|
||||||
|
# Wow this is cool!
|
||||||
|
# </whiz>
|
||||||
|
# </gee>
|
||||||
|
#
|
||||||
|
# ==== !!!
|
||||||
|
#
|
||||||
|
# When describing XHTML documents with Haml,
|
||||||
|
# you can have a document type or XML prolog generated automatically
|
||||||
|
# by including the characters <tt>!!!</tt>.
|
||||||
|
# For example:
|
||||||
|
#
|
||||||
|
# !!! XML
|
||||||
|
# !!!
|
||||||
|
# %html
|
||||||
|
# %head
|
||||||
|
# %title Myspace
|
||||||
|
# %body
|
||||||
|
# %h1 I am the international space station
|
||||||
|
# %p Sign my guestbook
|
||||||
|
#
|
||||||
|
# is compiled to:
|
||||||
|
#
|
||||||
|
# <?xml version="1.0" encoding="utf-8" ?>
|
||||||
|
# <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||||
|
# <html>
|
||||||
|
# <head>
|
||||||
|
# <title>Myspace</title>
|
||||||
|
# </head>
|
||||||
|
# <body>
|
||||||
|
# <h1>I am the international space station</h1>
|
||||||
|
# <p>Sign my guestbook</p>
|
||||||
|
# </body>
|
||||||
|
# </html>
|
||||||
|
#
|
||||||
|
# You can also specify the version and type of XHTML after the <tt>!!!</tt>.
|
||||||
|
# XHTML 1.0 Strict, Transitional, and Frameset and XHTML 1.1 are supported.
|
||||||
|
# The default version is 1.0 and the default type is Transitional.
|
||||||
|
# For example:
|
||||||
|
#
|
||||||
|
# !!! 1.1
|
||||||
|
#
|
||||||
|
# is compiled to:
|
||||||
|
#
|
||||||
|
# <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||||
|
#
|
||||||
|
# and
|
||||||
|
#
|
||||||
|
# !!! Strict
|
||||||
|
#
|
||||||
|
# is compiled to:
|
||||||
|
#
|
||||||
|
# <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||||
|
#
|
||||||
|
# If you're not using the UTF-8 characterset for your document,
|
||||||
|
# you can specify which encoding should appear
|
||||||
|
# in the XML prolog in a similar way.
|
||||||
|
# For example:
|
||||||
|
#
|
||||||
|
# !!! XML iso-8859-1
|
||||||
|
#
|
||||||
|
# is compiled to:
|
||||||
|
#
|
||||||
|
# <?xml version="1.0" encoding="iso-8859-1" ?>
|
||||||
|
#
|
||||||
|
# ==== /
|
||||||
|
#
|
||||||
|
# The forward slash character, when placed at the beginning of a line,
|
||||||
|
# wraps all text after it in an HTML comment.
|
||||||
|
# For example:
|
||||||
|
#
|
||||||
|
# %billabong
|
||||||
|
# / This is the billabong element
|
||||||
|
# I like billabongs!
|
||||||
|
#
|
||||||
|
# is compiled to:
|
||||||
|
#
|
||||||
|
# <billabong>
|
||||||
|
# <!-- This is the billabong element -->
|
||||||
|
# I like billabongs!
|
||||||
|
# </billabong>
|
||||||
|
#
|
||||||
|
# The forward slash can also wrap indented sections of code. For example:
|
||||||
|
#
|
||||||
|
# /
|
||||||
|
# %p This doesn't render...
|
||||||
|
# %div
|
||||||
|
# %h1 Because it's commented out!
|
||||||
|
#
|
||||||
|
# is compiled to:
|
||||||
|
#
|
||||||
|
# <!--
|
||||||
|
# <p>This doesn't render...</p>
|
||||||
|
# <div>
|
||||||
|
# <h1>Because it's commented out!</h1>
|
||||||
|
# </div>
|
||||||
|
# -->
|
||||||
|
#
|
||||||
|
# You can also use Internet Explorer conditional comments
|
||||||
|
# (about)[http://www.quirksmode.org/css/condcom.html]
|
||||||
|
# by enclosing the condition in square brackets after the <tt>/</tt>.
|
||||||
|
# For example:
|
||||||
|
#
|
||||||
|
# /[if IE]
|
||||||
|
# %a{ :href => 'http://www.mozilla.com/en-US/firefox/' }
|
||||||
|
# %h1 Get Firefox
|
||||||
|
#
|
||||||
|
# is compiled to:
|
||||||
|
#
|
||||||
|
# <!--[if IE]>
|
||||||
|
# <a href='http://www.mozilla.com/en-US/firefox/'>
|
||||||
|
# <h1>Get Firefox</h1>
|
||||||
|
# </a>
|
||||||
|
# <![endif]-->
|
||||||
|
#
|
||||||
|
# ==== \
|
||||||
|
#
|
||||||
|
# The backslash character escapes the first character of a line,
|
||||||
|
# allowing use of otherwise interpreted characters as plain text.
|
||||||
|
# For example:
|
||||||
|
#
|
||||||
|
# %title
|
||||||
|
# = @title
|
||||||
|
# \- MySite
|
||||||
|
#
|
||||||
|
# is compiled to:
|
||||||
|
#
|
||||||
|
# <title>
|
||||||
|
# MyPage
|
||||||
|
# - MySite
|
||||||
|
# </title>
|
||||||
|
#
|
||||||
|
# ==== |
|
||||||
|
#
|
||||||
|
# The pipe character designates a multiline string.
|
||||||
|
# It's placed at the end of a line
|
||||||
|
# and means that all following lines that end with <tt>|</tt>
|
||||||
|
# will be evaluated as though they were on the same line.
|
||||||
|
# For example:
|
||||||
|
#
|
||||||
|
# %whoo
|
||||||
|
# %hoo I think this might get |
|
||||||
|
# pretty long so I should |
|
||||||
|
# probably make it |
|
||||||
|
# multiline so it doesn't |
|
||||||
|
# look awful. |
|
||||||
|
# %p This is short.
|
||||||
|
#
|
||||||
|
# is compiled to:
|
||||||
|
#
|
||||||
|
# %hoo I think this might get |
|
||||||
|
# pretty long so I should |
|
||||||
|
# probably make it |
|
||||||
|
# multiline so it doesn't |
|
||||||
|
# look awful. |
|
||||||
|
#
|
||||||
|
# === Ruby evaluators
|
||||||
|
#
|
||||||
|
# ==== =
|
||||||
|
#
|
||||||
|
# The equals character is followed by Ruby code,
|
||||||
|
# which is evaluated and the output inserted into the document as plain text.
|
||||||
|
# For example:
|
||||||
|
#
|
||||||
|
# %p
|
||||||
|
# = ['hi', 'there', 'reader!'].join " "
|
||||||
|
# = "yo"
|
||||||
|
#
|
||||||
|
# is compiled to:
|
||||||
|
#
|
||||||
|
# <p>
|
||||||
|
# hi there reader!
|
||||||
|
# yo
|
||||||
|
# </p>
|
||||||
|
#
|
||||||
|
# ==== ~
|
||||||
|
#
|
||||||
|
# The tilde character works the same as the equals character,
|
||||||
|
# but the output is modified in such a way
|
||||||
|
# that newlines in whitespace-sensitive elements work properly.
|
||||||
|
# For example:
|
||||||
|
#
|
||||||
|
# %foo
|
||||||
|
# = "Woah <pre> this is \n</pre> crazy"
|
||||||
|
# %foo2
|
||||||
|
# ~ "Woah <pre> this is \n</pre> crazy"
|
||||||
|
#
|
||||||
|
# is compiled to:
|
||||||
|
#
|
||||||
|
# <foo>
|
||||||
|
# Woah <pre> this is
|
||||||
|
# </pre> crazy
|
||||||
|
# </foo>
|
||||||
|
# <foo2>
|
||||||
|
# Woah <pre> this is 
</pre> crazy
|
||||||
|
# </foo2>
|
||||||
|
#
|
||||||
|
# If the ~ character isn't followed by text,
|
||||||
|
# it doesn't evaluate Ruby at all.
|
||||||
|
# Instead, an indented section following it will be rendered
|
||||||
|
# in a whitespace-sensitive manner,
|
||||||
|
# using HTML encodings for newlines.
|
||||||
|
# For example:
|
||||||
|
#
|
||||||
|
# For example:
|
||||||
|
#
|
||||||
|
# .house
|
||||||
|
# %pre
|
||||||
|
# ~
|
||||||
|
# /^^^\
|
||||||
|
# |[] []|
|
||||||
|
# |_____|
|
||||||
|
#
|
||||||
|
# is compiled to:
|
||||||
|
#
|
||||||
|
# <div class="house">
|
||||||
|
# <pre>
|
||||||
|
# 
 /^^^\
|[] []|
|_____|

|
||||||
|
# </pre>
|
||||||
|
# </div>
|
||||||
|
#
|
||||||
|
# ==== -
|
||||||
|
#
|
||||||
|
# The hyphen character makes the text following it into "silent script":
|
||||||
|
# Ruby script that is evaluated, but not output.
|
||||||
|
#
|
||||||
|
# <b>It is not recommended that you use this widely;
|
||||||
|
# almost all processing code and logic should be restricted
|
||||||
|
# to the Controller, the Helper, or partials.</b>
|
||||||
|
#
|
||||||
|
# For example:
|
||||||
|
#
|
||||||
|
# - foo = "hello"
|
||||||
|
# - foo << " there"
|
||||||
|
# - foo << " you!"
|
||||||
|
# %p= foo
|
||||||
|
#
|
||||||
|
# is compiled to:
|
||||||
|
#
|
||||||
|
# <p>
|
||||||
|
# hello there you!
|
||||||
|
# </p>
|
||||||
|
#
|
||||||
|
# ===== Blocks
|
||||||
|
#
|
||||||
|
# Ruby blocks, like XHTML tags, don't need to be explicitly closed in Haml.
|
||||||
|
# Rather, they're automatically closed, based on indentation.
|
||||||
|
# A block begins whenever the indentation is increased
|
||||||
|
# after a silent script command.
|
||||||
|
# It ends when the indentation decreases
|
||||||
|
# (as long as it's not an +else+ clause or something similar).
|
||||||
|
# For example:
|
||||||
|
#
|
||||||
|
# - (42...47).each do |i|
|
||||||
|
# %p= i
|
||||||
|
# %p See, I can count!
|
||||||
|
#
|
||||||
|
# is compiled to:
|
||||||
|
#
|
||||||
|
# <p>
|
||||||
|
# 42
|
||||||
|
# </p>
|
||||||
|
# <p>
|
||||||
|
# 43
|
||||||
|
# </p>
|
||||||
|
# <p>
|
||||||
|
# 44
|
||||||
|
# </p>
|
||||||
|
# <p>
|
||||||
|
# 45
|
||||||
|
# </p>
|
||||||
|
# <p>
|
||||||
|
# 46
|
||||||
|
# </p>
|
||||||
|
#
|
||||||
|
# Another example:
|
||||||
|
#
|
||||||
|
# %p
|
||||||
|
# - case 2
|
||||||
|
# - when 1
|
||||||
|
# = "1!"
|
||||||
|
# - when 2
|
||||||
|
# = "2?"
|
||||||
|
# - when 3
|
||||||
|
# = "3."
|
||||||
|
#
|
||||||
|
# is compiled to:
|
||||||
|
#
|
||||||
|
# <p>
|
||||||
|
# 2?
|
||||||
|
# </p>
|
||||||
|
#
|
||||||
|
# == Using Haml as a Rails plugin
|
||||||
|
#
|
||||||
|
# Write Rails templates with the .haml extension.
|
||||||
|
# For example:
|
||||||
|
#
|
||||||
|
# # file: app/views/movies/teen_wolf.haml
|
||||||
|
#
|
||||||
|
# %html
|
||||||
|
# %head
|
||||||
|
# %title= "Teen Wolf (1985)"
|
||||||
|
# %body
|
||||||
|
# #contents
|
||||||
|
# %h1 "A highschooler discovers that he is a werewolf"
|
||||||
|
# %ul.cast
|
||||||
|
# %li "Scott Howard"
|
||||||
|
# %li "Rupert 'Stiles' Stilinski"
|
||||||
|
# %li "Lisa 'Boof' Marconi"
|
||||||
|
# %li "Lewis"
|
||||||
|
#
|
||||||
|
# is compiled to:
|
||||||
|
#
|
||||||
|
# <html>
|
||||||
|
# <head>
|
||||||
|
# <title>Teen Wolf (1985)</title>
|
||||||
|
# </head>
|
||||||
|
# <body>
|
||||||
|
# <div id='contents'>
|
||||||
|
# <h1>A highschooler discovers that he is a werewolf</h1>
|
||||||
|
# <ul class='cast'>
|
||||||
|
# <li>Scott Howard</li>
|
||||||
|
# <li>Rupert 'Stiles' Stilinski</li>
|
||||||
|
# <li>Lisa 'Boof' Marconi</li>
|
||||||
|
# <li>Lewis</li>
|
||||||
|
# </ul>
|
||||||
|
# </div>
|
||||||
|
# </body>
|
||||||
|
# </html>
|
||||||
|
#
|
||||||
|
# You can access instance variables in Haml templates
|
||||||
|
# the same way you do in ERb templates.
|
||||||
|
# Helper methods are also available in Haml templates.
|
||||||
|
# For example:
|
||||||
|
#
|
||||||
|
# # file: app/controllers/movies_controller.rb
|
||||||
|
#
|
||||||
|
# class MoviesController < ApplicationController
|
||||||
|
# def index
|
||||||
|
# @title = "Teen Wolf"
|
||||||
|
# end
|
||||||
|
# end
|
||||||
|
#
|
||||||
|
# # file: app/views/movies/index.haml
|
||||||
|
#
|
||||||
|
# #content
|
||||||
|
# .title
|
||||||
|
# %h1= @title
|
||||||
|
# = link_to 'Home', home_url
|
||||||
|
#
|
||||||
|
# may be compiled to:
|
||||||
|
#
|
||||||
|
# <div id='content'>
|
||||||
|
# <div class='title'>
|
||||||
|
# <h1>Teen Wolf</h1>
|
||||||
|
# <a href='/'>Home</a>
|
||||||
|
# </div>
|
||||||
|
# </div>
|
||||||
|
#
|
||||||
|
# === Setting Options
|
||||||
|
#
|
||||||
|
# Options can be set by setting the hash <tt>Haml::Template.options</tt>
|
||||||
|
# from <tt>environment.rb</tt>.
|
||||||
|
# Available options are:
|
||||||
|
#
|
||||||
|
# [<tt>:suppress_eval</tt>] Whether or not attribute hashes and Ruby scripts
|
||||||
|
# designated by <tt>=</tt> or <tt>~</tt> should be
|
||||||
|
# evaluated. If this is true, said scripts are
|
||||||
|
# rendered as empty strings. Defaults to false.
|
||||||
|
#
|
||||||
|
# [<tt>:precompiled</tt>] A string containing a precompiled Haml template.
|
||||||
|
# If this is passed, <tt>template</tt> is ignored
|
||||||
|
# and no precompilation is done.
|
||||||
|
#
|
||||||
|
# [<tt>:attr_wrapper</tt>] The character that should wrap element attributes.
|
||||||
|
# This defaults to <tt>'</tt> (an apostrophe). Characters
|
||||||
|
# of this type within the attributes will be escaped
|
||||||
|
# (e.g. by replacing them with <tt>'</tt>) if
|
||||||
|
# the character is an apostrophe or a quotation mark.
|
||||||
|
#
|
||||||
|
# [<tt>:locals</tt>] The local variables that will be available within the
|
||||||
|
# template. For instance, if <tt>:locals</tt> is
|
||||||
|
# <tt>{ :foo => "bar" }</tt>, then within the template,
|
||||||
|
# <tt>= foo</tt> will produce <tt>bar</tt>.
|
||||||
|
#
|
||||||
|
module Haml; end
|
||||||
|
|
||||||
require 'haml/engine'
|
require 'haml/engine'
|
||||||
|
|
|
@ -1,3 +1,6 @@
|
||||||
dir = File.dirname(__FILE__)
|
dir = File.dirname(__FILE__)
|
||||||
$LOAD_PATH << dir unless $LOAD_PATH.include?(dir)
|
$LOAD_PATH << dir unless $LOAD_PATH.include?(dir)
|
||||||
|
|
||||||
|
module Sass; end
|
||||||
|
|
||||||
require 'sass/engine'
|
require 'sass/engine'
|
||||||
|
|
Loading…
Add table
Reference in a new issue