-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathrails-haml.html
197 lines (197 loc) · 17.6 KB
/
rails-haml.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Haml and Rails · RailsApps</title>
<meta name="viewport" content="width=device-width">
<link href="https://plus.google.com/117374718581973393536" rel="publisher">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.min.css">
<link rel="stylesheet" href="http://railsapps.github.io/css/railsapps.css" />
<link rel="stylesheet" href="http://railsapps.github.io/css/syntax.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script type="text/javascript">
window.analytics=window.analytics||[],window.analytics.methods=["identify","group","track","page","pageview","alias","ready","on","once","off","trackLink","trackForm","trackClick","trackSubmit"],window.analytics.factory=function(t){return function(){var a=Array.prototype.slice.call(arguments);return a.unshift(t),window.analytics.push(a),window.analytics}};for(var i=0;i<window.analytics.methods.length;i++){var key=window.analytics.methods[i];window.analytics[key]=window.analytics.factory(key)}window.analytics.load=function(t){if(!document.getElementById("analytics-js")){var a=document.createElement("script");a.type="text/javascript",a.id="analytics-js",a.async=!0,a.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.io/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(a,n)}},window.analytics.SNIPPET_VERSION="2.0.9",
window.analytics.load("l1stqfqqbf");
window.analytics.page();
window.analytics.ready(function () {
ga('require', 'linker');
ga('linker:autoLink', ['railscomposer.com','learn-rails.com','blog.railsapps.org','tutorials.railsapps.org']);
});
</script>
</head>
<body>
<div class="fixed">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<a href="http://railsapps.github.io/" class="brand">RailsApps Project</a>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><a href="https://tutorials.railsapps.org/" class="google">Tutorials</a></li>
<li><a href="http://twitter.com/rails_apps" class="twitter">Twitter</a></li>
<li><a href="http://blog.railsapps.org/" class="twitter">Blog</a></li>
<li><a href="https://github.com/RailsApps" class="github">GitHub Repository</a></li>
</ul>
</section>
</nav>
</div>
<div class="row">
<div class="large-12 columns">
<div class="content wikistyle gollum textile">
<h1>Haml and Rails</h1>
<h4>by Daniel Kehoe</h4>
<p><em>Last updated 2 April 2013</em></p>
<p>Using Haml with Rails. A guide for developers using the example apps from the <a href="http://railsapps.github.io/">RailsApps</a> project. Others may find it helpful as well.</p>
<h4>If You Are New to Rails</h4>
<p>If you’re new to Rails, see <a href="http://railsapps.github.io/what-is-ruby-rails.html">What is Ruby on Rails?</a>, the book <a href="http://learn-rails.com/learn-ruby-on-rails.html">Learn Ruby on Rails</a>, and recommendations for a <a href="https://tutorials.railsapps.org/rails-tutorial">Rails tutorial</a>.</p>
<h4><a href="http://railsapps.github.io/"><img src="http://railsapps.github.io/images/join/join-railsapps.png" title="Join RailsApps" alt="Join RailsApps"></a></h4>
<h4>What is the RailsApps Project?</h4>
<p>This is an article from the RailsApps project. The <a href="http://railsapps.github.io/">RailsApps project</a> provides example applications that developers use as starter apps. Hundreds of developers use the apps, report problems as they arise, and propose solutions. Rails changes frequently; each application is known to work and serves as your personal “reference implementation.” Each application is accompanied by a tutorial so there is no mystery code. Support for the project comes from subscribers. Please accept our invitation to <a href="http://railsapps.github.io/">join the RailsApps project</a>.</p>
<h2>About Haml</h2>
<p><a href="http://haml-lang.com/">Haml</a> is a popular alternative to the default Rails templating language (“<span class="caps">ERB</span>”).</p>
<p><a href="http://en.wikipedia.org/wiki/ERuby"><span class="caps">ERB</span></a> is a templating system that embeds Ruby into an <span class="caps">HTML</span> document, similar to <span class="caps">ASP</span>, <span class="caps">JSP</span> and <span class="caps">PHP</span>. It preserves the syntax of <span class="caps">HTML</span> and allows Ruby code to be embedded within a pair of <code><%</code> and <code>%></code> delimiters. Haml eliminates the <code><%</code> and <code>%></code> delimiters and uses indentation to mark the beginning and end of markup so that closing tags are not required.</p>
<h2>Haml Advantages and Drawbacks</h2>
<p>Haml is intended for “elegant” markup, eliminating the repetitive tags of <span class="caps">HTML</span> and integrating conditional logic succinctly. It’s easier to read.</p>
<p>Indentation is significant in Haml, which makes for well-structured code, but failures resulting from indentation errors are annoying when using Haml. An <span class="caps">IDE</span> that provides auto-indenting can make Haml easier to use (see <a href="http://blog.jetbrains.com/ruby/tag/haml/"><span class="caps">HAML</span> in RubyMine</a>).</p>
<p>If you’re working on a team, you may find designers are more comfortable with <span class="caps">ERB</span> as it more closely resembles familiar <span class="caps">HTML</span>. And Haml will break if everyone on the team is not using tabs or spaces for indentation consistently.</p>
<p>Finally, for someone new to Rails, Haml is one more new thing to learn, which may not be welcome when there’s so much to learn already.</p>
<p>Despite these drawbacks, I like to use Haml because it eliminates superfluous markup and makes view code much easier to read.</p>
<p>Before you start a project with Haml, read <a href="http://chriseppstein.github.com/blog/2010/02/08/haml-sucks-for-content/">advice from Chris Eppstein</a> about how to use Haml.</p>
<p>For more, see a discussion about Haml’s advantages and drawbacks, titled <a href="http://opensoul.org/blog/archives/2011/11/30/haml-the-unforgivable-sin/"><span class="caps">HAML</span>: the unforgivable sin</a>.</p>
<h2>Setting Up Haml</h2>
<p>Here are instructions for adding Haml to an existing Rails project. You’ll need extra gems in the <strong>Gemfile</strong> for Haml:</p>
<pre>
gem 'haml-rails', '>= 0.3.4', :group => :development
</pre>
<p>Run the gem bundler command:</p>
<pre>
$ bundle install
</pre>
<p>With the haml-rails gem, there is no need to modify the <strong>application.rb</strong> file to accommodate Haml. Any time you generate a controller or scaffold, you’ll get Haml instead of <span class="caps">ERB</span> templates. And when your Rails application loads, Haml will be loaded and initialized.</p>
<h2>Syntax Highlighting for Haml</h2>
<p>You’ll want to add Haml syntax highlighting to your text editor. There are several versions of TextMate bundles for Haml. The most current is the <a href="https://github.com/phuibonhoa/handcrafted-haml-textmate-bundle">haml-textmate-bundle</a> from Philippe Huibonhoa. TextMate bundles will work with the popular Sublime Text 2 editor as well. If you are using vim, you can <a href="http://stackoverflow.com/questions/1639606/how-do-i-install-a-plugin-for-vim">install vim plugins for Haml</a>.</p>
<h2>Converting <span class="caps">HTML</span> to Haml</h2>
<p>Most Rails examples and tutorials use <span class="caps">ERB</span>. But it is easy to convert <span class="caps">ERB</span> to Haml using this website:</p>
<ul>
<li><a href="http://html2haml.heroku.com/">Html2Haml</a></li>
</ul>
<p>Paste your <span class="caps">HTML</span> or <span class="caps">ERB</span> code into a text field, click convert, and you’ll have clean Haml code, ready to paste in your app views.</p>
<p>If you want to convert an entire Rails application from <span class="caps">ERB</span> to Haml, use the <a href="https://github.com/haml/html2haml">html2haml</a> gem. You can use a <a href="http://stackoverflow.com/questions/9398776/is-there-a-sexy-bash-command-for-converting-an-entire-directory-to-haml-from-htm">shell script</a> or write a simple Ruby script to convert a set of files.</p>
<h2>Rails Starter Apps Using Haml</h2>
<p>If you’d like to start a new project with Haml, you can generate a Rails application set up for Haml. Use the <a href="http://railsapps.github.io/rails-composer/">Rails Composer</a> tool to create a new Rails application:</p>
<pre>
$ rails new myapp -m https://raw.github.com/RailsApps/rails-composer/master/composer.rb
</pre>
<p>You’ll have a choice of Haml or <span class="caps">ERB</span>. Plus the program will give you options for a <span class="caps">CSS</span> front-end framework such as Twitter Bootstrap and create a default application layout using HTML5 (see the article <a href="http://railsapps.github.io/rails-html5-boilerplate.html">HTML5 Boilerplate for Rails Developers</a>).</p>
<h2>Creating Haml Applications by Default</h2>
<p>The <code>rails new</code> command creates a new Rails application with a default application layout using <span class="caps">ERB</span>. If you want to use Haml for every Rails application you build, you can set options for the <code>rails new</code> command in a <strong>.railsrc</strong> file in your home directory. Here’s how to set up a <strong>.railsrc</strong> file to use the rails3-haml-html5 template when you create a new Rails application:</p>
<pre>
# ~/.railsrc
-m https://raw.github.com/RailsApps/rails3-application-templates/master/rails3-haml-html5-template.rb
</pre>
<h2>Credits</h2>
<p>Brook Riggio wrote a helpful blog post on <a href="http://decielo.com/articles/377/haml-by-default-in-a-new-rails-3-2-app">Haml by Default in a New Rails 3.2 App</a> and initiated work on the rails3-haml-html5 template.</p>
<p>Daniel Kehoe wrote this article for the RailsApps project.</p>
<p>Was this useful to you? Follow me on Twitter:<br>
<a href="http://twitter.com/rails_apps">rails_apps</a><br>
and tweet some praise. I’d love to know you were helped out by the article.</p>
</div>
<div class="comments" id="comments">
<div class="content wikistyle gollum">
<h2>Comments</h2>
</div>
<p>Is this helpful? Your encouragement fuels the project. Please tweet or add a comment. Couldn't get something to work? For the example apps and tutorials, it's best to open an issue on GitHub so we can help you.</p>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'railsapps'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div><!-- class="comments" -->
</div><!-- class="columns" -->
</div><!-- class="row" -->
<footer class="row">
<div class="large-12 columns">
<div class="row">
<div class="medium-4 large-4 columns">
<dl class="footer_nav">
<dt>RailsApps · Getting Started</dt>
<dd><a href="http://railsapps.github.io/ruby-and-rails.html">Ruby on Rails</a></dd>
<dd><a href="http://railsapps.github.io/what-is-ruby-rails.html">What is Ruby on Rails?</a></dd>
<dd><a href="http://learn-rails.com/learn-ruby-on-rails.html">Learn Ruby on Rails</a></dd>
<dd><a href="https://tutorials.railsapps.org/rails-tutorial">Rails Tutorial</a></dd>
<dd><a href="http://learn-rails.com/ruby-on-rails-tutorial-for-beginners">Ruby on Rails Tutorial for Beginners</a></dd>
<dd><a href="http://railsapps.github.io/installing-rails.html">Install Ruby on Rails</a></dd>
<dd><a href="http://railsapps.github.io/installrubyonrails-mac.html">Install Ruby on Rails - Mac OS X</a></dd>
<dd><a href="http://railsapps.github.io/installrubyonrails-ubuntu.html">Install Ruby on Rails - Ubuntu</a></dd>
<dd><a href="http://railsapps.github.io/rubyonrails-nitrous-io.html">Ruby on Rails - Nitrous.io</a></dd>
<dd><a href="http://railsapps.github.io/updating-rails.html">Update Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-composer/">Rails Composer</a></dd>
<dd><a href="http://railsapps.github.io/">Rails Examples</a></dd>
<dd><a href="http://railsapps.github.io/rails-examples-tutorials.html">Rails Starter Apps</a></dd>
</dl>
</div>
<div class="medium-4 large-4 columns">
<dl class="footer_nav">
<dt>RailsApps · Articles</dt>
<dd><a href="http://railsapps.github.io/rails-authorization.html">Rails Authorization</a></dd>
<dd><a href="http://railsapps.github.io/rails-google-analytics.html">Analytics for Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-heroku-tutorial.html">Heroku and Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-javascript-include-external.html">JavaScript and Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-environment-variables.html">Rails Environment Variables</a></dd>
<dd><a href="http://railsapps.github.io/rails-git.html">Git and Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-github.html">Rails GitHub</a></dd>
<dd><a href="http://railsapps.github.io/rails-send-email.html">Send Email with Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-haml.html">Haml and Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-default-application-layout.html">Rails Application Layout</a></dd>
<dd><a href="http://railsapps.github.io/rails-html5-boilerplate.html">HTML5 Boilerplate for Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-3-2-example-gemfile.html">Example Gemfiles for Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-application-templates.html">Rails Application Templates</a></dd>
<dd><a href="http://railsapps.github.io/rails-product-planning.html">Rails Product Planning</a></dd>
<dd><a href="http://railsapps.github.io/rails-project-management.html">Rails Project Management</a></dd>
</dl>
</div>
<div class="medium-4 large-4 columns">
<dl class="footer_nav">
<dt>RailsApps · Tutorials</dt>
<dd><a href="http://railsapps.github.io/twitter-bootstrap-rails.html">Rails Bootstrap</a></dd>
<dd><a href="http://railsapps.github.io/rails-foundation.html">Rails Foundation</a></dd>
<dd><a href="http://railsapps.github.io/rails-omniauth/">OmniAuth Tutorial</a></dd>
<dd><a href="http://railsapps.github.io/tutorial-rails-devise.html">Rails Devise Tutorial</a></dd>
<dd><a href="http://railsapps.github.io/tutorial-rails-devise-rspec-cucumber.html">Devise RSpec</a></dd>
<dd><a href="http://railsapps.github.io/tutorial-rails-bootstrap-devise-cancan.html">Devise Bootstrap</a></dd>
<dd><a href="http://railsapps.github.io/rails-devise-roles">Role-Based Authorization</a></dd>
<dd><a href="http://railsapps.github.io/rails-devise-pundit">Rails Authorization with Pundit</a></dd>
<dd><a href="https://tutorials.railsapps.org/rails-stripe-membership-saas">Rails Membership Site with Stripe</a></dd>
<dd><a href="https://tutorials.railsapps.org/rails-recurly-subscription-saas">Rails Subscription Site with Recurly</a></dd>
<dd><a href="https://tutorials.railsapps.org/rails-prelaunch-signup">Startup Prelaunch Signup Application</a></dd>
</dl>
<dl class="footer_nav">
<dt>RailsApps Profile</dt>
<dd><a href="https://plus.google.com/108039160165742774777?rel=author">Google</a></dd>
<dd><a href="https://plus.google.com/117374718581973393536" rel="publisher">Find us on Google+</a></dd>
</dl>
</div>
</div>
</div>
</footer>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>