【初心者向け】slimの書き方

はじめに

職場で初めてslim記法に触れて全く読めなかったので、基礎だけでも押さえようと記事にまとめてみました。
修正点等ありましたら教えていただけると助かります。

参考

RailsのHTMLテンプレートエンジン、Slimの基本的な記法
【爆速で習得】Railsでslimを使う方法から基本文法まで

slimとは

１：Ruby製のテンプレートエンジン
２：高速、軽量
３：htmlの閉じタグ不要
４：条件分岐などのend不要
５：インデントによって階層構造を表現するため、 ずれるとエラーになる

概要

大まかな概要はこちら。

<>不要
<%= %> → =
<% %> → -
コメント → /
id指定 → #
class指定 → .

書き方一覧

a

example.html

<a href="www.example.com">ホームページ</a>

example.slim

a href="www.example.com" ホームページ

p

example.html

<p>
      ほげほげ　ふがふが
      ほげほげ　ふがふが
</p>

example.slim

/ （改行する場合はパイプ(|)を使う）
p
  |
    ほげほげ　ふがふが
    ほげほげ　ふがふが

/ パイプの後ろに書いても良い
p
  | ほげほげ　ふがふが

erb記法

<%> <%> → -

example.slim

- if logged_in?
 li = link_to '投稿する', new_path
 li = link_to 'ログアウト', logout_path
- else
 li = link_to 'ログインする', '/auth/twitter'

<%=> <%> → =

example.slim

= form_for @micropost, :html => { class: "foo"} do |f|
  = f.text_field :title, placeholder: "内容"
  = f.submit "投稿する", class: "btn"

コメントアウト /

example.slim

 / li = link_to 'ログアウト', logout_path

クラス . ID #

example.slim

<div class="text">
</div>

<div id="text">
</div>

/ 正 （divタグ省略）
.text
# text

/ 複数クラスの記載は.で繋ぐ
.text.text-plain

render yield

new.html.slim

/ 誤
= render 'form', user: @user

/ 正 （render yield は ==）
== render 'form', user: @user

if文

example.html

<% if current_user.nil? %>
  <li>新規登録</li>
<% else %>
  <li>ログイン</li>
<% end %>

example.slim

- if current_user.nil?
  li 新規登録
- else
  li ログイン

/ end不要