Getting Started

HamlとSassの簡単な説明

HamlはHTMLを生成するためのマークアップ言語です。読みやすく書きやすい、簡潔な記法を特徴としています。

SassはCSSを生成するためのメタ言語です。本来のCSSでは不可能な構造化記述、定数の使用、算術演算などをサポートします。

Haml/Sassのオリジナル実装はHampton Catlinによって作られました。現在のメインメンテナはNathan Weizenbaum です。Haml/SassはMITライセンスで提供されています。ソースコードはGitHubから入手できます。

Haml/Sassをインストールする

gemコマンドでインストールします。SassはHamlに含まれています (単独のパッケージはありません)。

$ gem install haml
Successfully installed haml-2.0.9
1 gem installed

Railsアプリケーションにプラグインをインストールする

haml --rails path/to/rails_appを使用します。

$ rails hello_haml
$ cd hello_haml
$ haml --rails .
Haml plugin added to .

$ ls vendor/plugin/haml
init.rb

Hamlを使う

通常のerbファイルと同じ場所 (app/views/controller_name/) に拡張子*.html.hamlで作成します。

$ script/generate controller hello
$ vim app/views/hello/index.html.haml

!!! XML
!!!
%html{html_attrs}
  %head
    %title Hello, Haml!
  %body
    %h1 Hello, Haml!

早速動作を確認してみましょう。

$ script/server

ブラウザでhttp://localhost:3000/helloを開いてみてください。Hamlから生成されたHTMLが表示されるはずです。

Sassを使う

public/stylesheets/sassに拡張子*.sassで作成します。

$ mkdir public/stylesheets/sass
$ vim public/stylesheets/sass/style.sass

h1
  :color red

先程作成したapp/views/hello/index.html.hamlを以下のように修正します。

!!! XML
!!!
%html{html_attrs}
  %head
    %title Hello, Haml!
    = stylesheet_link_tag 'style'
  %body
    %h1 Hello, Haml!

再度http://localhost:3000/helloを開いてみましょう。Sassで定義したスタイルが適用されているはずです。

stylesheet_link_tag 'sass/style'ではないことに注意してください。Sassはpublic/stylesheets/*.cssへのアクセスをフックし、自動的にCSSを生成します。