Haml and Sass: Solution for you who get tired of ugly markup
52
Eiwa System Management, Inc. / Nihon Haml-no-kai Keita Urashima Haml and Sass Solution for you who get tired of ugly markup
-
Upload
keita-urashima -
Category
Technology
-
view
3.922 -
download
0
description
in RubyKaigi2009
Transcript of Haml and Sass: Solution for you who get tired of ugly markup
Eiwa System Management, Inc. / Nihon Haml-no-kai
Keita Urashima
Haml and SassSolution for you who get tired of ugly markup
•A programmer of Eiwa System Management, Inc.I practice agile development with Ruby and Rails.http://ruby.agile.esm.co.jp
• I like Vim, Gentoo Linux, Tiling Window Manager, Kinesis Contoured Keyboard, and Ruby (Of course).
Keita Urashima (ursm)http://twitter.com/ursm
Summary•The time of writing RHTML and CSS by hand was over.•You should use Haml and Sass.
Don't you think so?•When developing Web Application...•Coding is fun. Ruby makes me feel good. ；)•However, neither (R)HTML nor CSS are so. ：(
Solution
About Haml/Sass•Are libraries to generate HTML and CSS respectively.•Integrating with various Web Application Frameworks.e.g. Rails, Merb, Ramaze, Sinatra, etc...
•Originally created by Hampton Catlin. Currently maintained by Nathan Weizenbaum (nex3).
http://nex-3.com/posts/84-haml-sass-2-2-released
Version 2.2 Released!
Problem•HTML is too redundant. It’s painful to write and to read it. •ERB is general purpose, and support to a specific format (e.g. HTML) is not offered.
Solution
What’s Haml?“Haml is a markup language that’s used to cleanly and simply describe the HTML of any web document without the use of inline code.”
- #haml.about (http://haml-lang.com/about.html)
<?xml version='1.0' encoding='utf-8' ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns='http://www.w3.org/1999/xhtml'> <head> <title><%=h @title %></title> </head> <body> <% if @content_for_nav %> <div class='navigation'> <%= yield :nav %> </div> <% end %> <div class='content'> <%= yield %> </div> </body></html>
RHTML
!!! XML!!! 1.1%html{:xmlns => 'http://www.w3.org/1999/xhtml'} %head %title&= @title %body - if @content_for_nav .navigation = yield :nav .content = yield
Haml
192 characters432 characters
-55%
<?xml version='1.0' encoding='utf-8' ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns='http://www.w3.org/1999/xhtml'> <head> <title><%=h @title %></title> </head> <body> <% if @content_for_nav %> <div class='navigation'> <%= yield :nav %> </div> <% end %> <div class='content'> <%= yield %> </div> </body></html>
!!! XML!!! 1.1%html{:xmlns => 'http://www.w3.org/1999/xhtml'} %head %title&= @title %body - if @content_for_nav .navigation = yield :nav .content = yield
Core Principles•Markup should be beautiful•Markup should be DRY•Markup should be well-indented•HTML structure should be clear
How?•Haml is specialized in a HTML, and has many functions for that.
Let’s see it.
RHTML Haml
<h1>Hello, World!</h1> %h1 Hello, World!
Elements
RHTML Haml<p> Hello, World!</p>
%p Hello, World!
<ul> <li>alpha <ul> <li>bravo</li> </ul> </li> <li>charly</li></ul>
%ul %li alpha %ul %li bravo %li charly
Elements
AttributesRHTML Haml
<a href=”…”>Haml</a> %a{:href => ’…’} Haml
<div class=”block”> …</div>
%div{:class=>‘block’} …
%div.block …
.block …
<div id=”header”> …</div>
#header …
Ruby evaluationRHTML Haml
<%= link_to … %> = link_to …
<p> <%=h user.name %></p>
%p&= user.name
<li title=”<%= user.name %>”> …</li>
%li{:title=>user.name} …
Ruby evaluation
RHTML Haml
<% users.each do |u| %><li><%=h u.name %></li><% end %>
- users.each do |u| %li&= u.name
<% if @user.admin? %> <%= admin_menu %><% else %> <%= common_menu %><% end %>
- if @user.admin? = admin_menu- else = common_menu
- %w(foo bar).each do |s| = s- end
Syntax error on line 3: You don't need to use "- end" in Haml. Use indentation instead:- if foo? %strong Foo!- else Not foo.
= %w(foo bar).map do |s| - s.upcase- end.join(‘<br/>’)
<%= %w(foo bar).map do |s| %> <% s.upcase %><% end.join(‘<br/>’) %>
In Haml 2.2:
Doctype/XML Declaration
RHTML Haml<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" …>
!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" …>
!!! 1.1
<?xml version='1.0' encoding='utf-8' ?> !!! XML
!!! XML!!! 1.1%html{:xmlns => 'http://www.w3.org/1999/xhtml'} %head %title&= @title %body - if @content_for_nav .navigation = yield :nav .content = yield
Advantage of Haml•Haml removes the redundancy of RHTML.•This means improvement of writability and readability.
Problem•CSS lacks the functions for making maintenance easy.
Solution
What’s Sass?“Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows.”
Nested Rules•In CSS, all rules are described in flat.•Sass allows rules which nested.
CSS Sass.content { margin: 1em;}.content h1 { font-size: 3em;}.content h1 strong { color: red;}
.content margin: 1em
h1 font-size: 1em
strong color: red
Variables and Operations•In CSS, you have to write the same value repeatedly.•You can use variable with Sass.
!base_color = red!base_margin = 3em
h3 color: white background-color = !base_color margin-left = !base_margin
!base_color = red!base_margin = 3em
h4 color = !base_color - #666 background-color: white margin-left = !base_margin + 1em
Mixins•CSS doesn’t have reusability.•Sass can reuse collection of are rules.
=round-border border-radius: 16px -webkit-border-radius: 16px -moz-border-radius: 16px
.navigation a +round-border
.navigation a { border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px;}
=clearfix display: inline-block &:after content: "." display: block height: 0 clear: both visibility: hidden * html & height: 1px
ul.menu +clearfix li float: left
=sexy-border(!color, !width = 1in) border: color = !color width = !width style: dashed
p +sexy-border("blue")
p { border-color: #0000ff; border-width: 1in; border-style: dashed;}
Advantage of Sass•Sass brings power to CSS. Stylesheet for a programmer.
Can these be used really?•These were made for professional use. It’s actually used in some companies. •These have been developed actively, and the bug is corrected promptly.•I used Haml/Sass from one year ago. Any problems didn’t occur.
Getting Started
$ gem install haml
http://haml-lang.com/help.htmlhttp://sass-lang.com/help.html
Integration with Rails1. Install a plugin$ haml --rails path/to/rails_app
2. Put your template and stylesheet$ vim app/views/hello/index.html.haml$ vim public/stylesheets/sass/style.sass
3. Run your application
Summary•The time of writing RHTML and CSS by hand was over.•You should use Haml and Sass.
•I work with a designer. Can we use Haml/Sass?•I have already used RHTML. How should I migrate to Haml?•How about the performance of Haml?
Expected Q&A
I work with a designer.Can we use Haml/Sass?
•I haven’t tried it. I think that it’s difficult.•If you are one team, it might be possible.
I have already used RHTML.How should I migrate to Haml?
•It isn’t necessary to do all at once. You can migrate every one file and one partial.
How about the performance of Haml?
•You should ask kwatch.•See http://nex-3.com/posts/81-more-haml-benchmark-issues“According to my benchmarks, master is 2.54 times slower than ERB by default, but is in fact 2% faster than ERB when the :ugly option is enabled.”
Thank You!
Any Questions?
