Haml と Sass - hs9587’s diary

Haml and Sass: Solution for you who get tired of ugly markup - 日本Ruby会議2009 の浦嶌さんの話しを聞いてちょっとやってみる、浦嶌さんの Hamlの話しは前にも聞いたよね。
hamptoncatlin.com is coming soon以下も参考に

夫々のリファレンス

まずはインストール

取り敢えずジェムから

[934] sudo gem install haml                           16:20 0720
Successfully installed haml-2.2.1
1 gem installed
Installing ri documentation for haml-2.2.1...
Installing RDoc documentation for haml-2.2.1...
Could not find main page README.rdoc
Could not find main page README.rdoc
Could not find main page README.rdoc
Could not find main page README.rdoc

hamlコマンドが使えるようになってる

[943] haml --version                                  16:35 0720
Haml 2.2.1 (Powerful Penny)

sassも

[946] sass --version                                  16:38 0720
Haml 2.2.1 (Powerful Penny)

この辺ですね。

/usr/bin/haml
/usr/bin/html2haml
/usr/bin/css2sass
/usr/bin/sass

コマンド

ちょっとコマンド試してみる

「haml」でHTML、まずは DOCTYPE と title

[974] ruby -e 'puts "!!!\n%html\n  %title haml\n"' | haml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <title>haml</title>
</html>

「sass」でCSS、p の色を Ruby的に

[975] ruby -e 'puts "p\n  color: red\n"' | sass       20:01 0720
p {
  color: red; }

なってる。インデントとかちゃんとしないとエラーしたり何も出てこなかったり。
逆変換も試す。

[986] ruby -e 'puts "p\n  color: red\n"' | sass | css2sass
p
  color: red

まあそうなってる

[987] ruby -e 'puts "!!!\n%html\n  %title haml\n"' | haml | html2haml
Required dependency hpricot not found!

要 hpricot だってさ、容れてからまた

(0)hs9587@vmw04[989] ruby -e 'puts "!!!\n%html\n  %title haml\n"' | haml | html2haml
!!!
%html
  %title
    haml

還って来る、ちょっと改行かわってるかな。

haml-2.2.2

といってる間にアップデートあった模様

[992] sudo gem update                                 20:55 0720
Updating installed gems
Updating haml
Successfully installed haml-2.2.2
Gems updated: haml
Installing ri documentation for haml-2.2.2...
Installing RDoc documentation for haml-2.2.2...
Could not find main page README.rdoc
Could not find main page README.rdoc
Could not find main page README.rdoc
Could not find main page README.rdoc

Railsアプリケーション

取り敢えず Railsアプリケーションを作る

[991] rails haml_sass -dpostgresql

gem からくるジェネレータとか特に haml系はないのね、「 script/generate --help」より

Installed Generators
  Rubygems: cucumber, feature, integration_spec, rspec, rspec_controller, rspec_
model, rspec_scaffold
  Builtin: controller, helper, integration_test, mailer, metal, migration, model
, observer, performance_test, plugin, resource, scaffold, session_migration

haml 或は sass のコマンドオプション --rails で Railsアプリにインストールする

Options:
        --rails RAILS_DIR            Install Haml and Sass from the Gem to a Rails project

[994] haml --rails .                                  21:01 0720
Haml plugin added to .

で、追加したからってジェネレータが増えるわけでもない

Installed Generators
  Rubygems: cucumber, feature, integration_spec, rspec, rspec_controller, rspec_
model, rspec_scaffold
  Builtin: controller, helper, integration_test, mailer, metal, migration, model
, observer, performance_test, plugin, resource, scaffold, session_migration

プラグインにはこんな感じ

[1000] cat vendor/plugins/haml/init.rb                21:09 0720
begin
  require File.join(File.dirname(__FILE__), 'lib', 'haml') # From here
rescue LoadError
  require 'haml' # From gem
end

# Load Haml and Sass
Haml.init_rails(binding)

適宜DBをセットアップする「rake db:create」とか、そして何かスキャフォルドしよう、

[1006] script/generate rspec_scaffold Item name:string description:text

別に haml系ビューファイルが出来るわけでもない。そして「rake db:migrate」、あと「script/generate rspec」順番が前後したので generate rspec_scaffold ももう一度。
この状態で haml系ビューテンプレートや sass系 scaffoldスタイルシートが出来るわけではないのか、いちいち手で何とかするのか。

とりあえず app/views/layouts/items.html.erb を変換。

[1024] html2haml app/views/layouts/items.html.erb app/views/layouts/items.html.haml
[1025] cat app/views/layouts/items.html.haml          21:43 0720
!!!
%html{ "xml:lang" => "en", :lang => "en", :xmlns => "http://www.w3.org/1999/xhtml" }
  %head
    %meta{ :content => "text/html;charset=UTF-8", "http-equiv" => "content-type" }
    %title
      Items:
      = controller.action_name
    = stylesheet_link_tag 'scaffold'
  %body
    %p{ :style => "color: green" }
      = flash[:notice]
    = yield

結構それっぽくなってるじゃん。.erbの方は適当に捨てる、なってる、.hamlのほうがイキになってる。

スタイルシートの方は

[1028] css2sass public/stylesheets/scaffold.css public/stylesheets/scaffold.sass
[1032] cat public/stylesheets/scaffold.sass
body
  background-color: #fff
  color: #333
  font-family: verdana, arial, helvetica, sans-serif
  font-size: 13px
  line-height: 18px


p, ol, ul, td
  font-family: verdana, arial, helvetica, sans-serif
  font-size: 13px
  line-height: 18px


pre
  background-color: #eee
  padding: 10px
  font-size: 11px


a
  color: #000

  &:visited
    color: #666

  &:hover
    color: #fff
    background-color: #000


.fieldWithErrors
  padding: 2px
  background-color: red
  display: table


#errorExplanation
  width: 400px
  border: 2px solid red
  padding: 7px
  padding-bottom: 12px
  margin-bottom: 20px
  background-color: #f0f0f0

  h2
    text-align: left
    font-weight: bold
    padding: 5px 5px 5px 15px
    font-size: 12px
    margin: -7px
    background-color: #c00
    color: #fff

  p
    color: #333
    margin-bottom: 0
    padding: 5px

  ul li
    font-size: 12px
    list-style: square

共通項目とかミックスインにくくりだしたりはしてない。

ファイルの場所は元と同じではいけない、通常は「public/stylesheets/sass」に持って行くべきかと、.sassファイル。そしてそういうディレクトリも作り

そうすると、public/stylesheets/ に .css ファイルも動的に生成されてる。出来てる .cssファイルはもとの scaffold.css とは、改行や行分割の仕方が全然違う感じ。

今日はここまで

始め方が分かった辺りで今日はここまで。
結構いけそうな感じするよね。