Slimの文法
Slimの文法の特徴は、コードの簡潔さと様々なニーズに応える柔軟性です。以下、簡単な例から始まり、文法のカスタマイズまで紹介します。
何もないところにおもむろに記述した単語は、HTMLタグとみなされます。
タグの内容が複数行にわたるときは、インデントを下げてその中に記述します。
テキストを記述するためには行頭に|
(パイプ)を置く必要があることに注意してください。こうしないと<現在時刻>
という斬新なタグが生成されてしまいます。
もしくは可読性が低くならなければ、RubyのStringのように#{}
で式を埋め込むことも可能です。
次に、前ページの例でも見たとおり、タグの後に.
(ドット)を置くことでclass属性を付与することができます。同様に#
がid属性になります。これらはjQueryのDOMセレクタと同じなので使ったことのある人には覚えやすいのではないかと思います。
なお出力結果のHTMLは見やすいように適当に改行していますが、実際はSlimは改行・スペースのないべたっとしたHTMLを出力するので留意しておいてください。
また、タグを省略してclass, idの記法を使うとdiv要素になります。一応div要素を明示的に書くことも出来ます。
属性(attributes)は、属性名="値"
という記法でタグの後にスペースを入れて記述します。その他、RubyのHashを使ったHaml的な書き方もあります。
上の3種類の書き方はすべて、等しいHTMLに変換されます。
出力しないロジックは-
を、評価結果を出力する場合は=
を、HTMLエスケープしないで出力する場合は==
をそれぞれRubyコードの前に付けます。
また、複数行に渡るRubyコードをviewに埋め込むために、ruby:
のあとにインデントを下げてRubyコードを書くことが出来ます。
その他、同様にしてjavascript:
, css:
, coffee:
, markdown:
なども埋め込むこともできます。
次のページでは、Slimのカスタマイズ方法と、RailsアプリケーションでSlimを使う方法を紹介します。