slimの使い方

slimとは

Rubyのテンプレートエンジンのことです。
erbとかあると思いますが、slimを使うと書く手間が省けて、
htmlより簡潔に書くことができます。

erbとの書き方の違い

slimの書き方の特徴を表にして行きます。

<>	これは使わない
<%= %>	=
<% %>	-
コメント	/
id指定	#
class指定	.

このように表記して行きます。

コードで表すと下のようになります。

.html

<h2>slim練習</h2>
<div class="content">
  <p>slimテスト</p>
</div>

slimにするとこうなります。

.slim

h2 slim練習
.content
  p slimテスト

書き方としてはかなりシンプルになります。

具体的に表にしてみます。

html(erb)	slim
	/
class="content"	.content
id="content"	#content
<%= hoge %>	=hoge
<% %>	-if

引用　　https://qiita.com/ngron/items/c03e68642c2ab77e7283

もっといろいろ書いてみる

erb(html)の書き方とslimの書き方を比較しながら見ていきます。

タグ

タグの書き方です。

<p>段落</p>
<a>Aタグ</a>
<img src="https://~ ~ " />

p 段落
a Aタグ
img src = "https://~ ~ "

クラス　id指定

クラなどの指定の書き方です。クラスやidはそれぞれ、., #で表現する

下がhtmlです。

<div class="content">
  <p class="title">タイトル</hoge>
</dev>
<div id="content">
  <p id="title">タイトル</hoge>
</div>

こちらがslimです。

.content
  p.title タイトル
#content
  p#title タイトル

次はクラスとidの組み合わせです。

<div class="title" id="content">
  <p class="title text-center">タイトル</p>
</div>

slimです。

.title#content
  p.title.text-center タイトル

条件式

条件式のような画面に表示させない時は<% %>を使いますが
そのslimでの使い方を見ていきます。
まずはhtmlからです。

<% if logged_in? %>
  <li> <%= 新規作成 %> </li>
<% else %>
  <li> <%= ログアウト %> </li>
<% end %>

次にslimです。

- if logged_in?
  li = 新規作成  
- else 
  li = ログアウト 

もう少しコードも追記してみます。
まずはhtmlです。

<%= link_to 'Edit', edit_memo_path %>
<%= link_to 'delete',delete_memo_path %>

slimにします。

= link_to  'Edit', edit_memo_path　
= link_to  'delete',delete_memo_path

コメント

コメントをslimで書くと以下のように書きます。

 /li = link_to 'ログイン', login_path

補足

|（パイプ)より後は文字列として扱われます。

終わりに

間違いがあるかと思うので気づいたらご指摘をお願いします。

参考資料

https://qiita.com/ngron/items/c03e68642c2ab77e7283
https://qiita.com/pugiemonn/items/b64171952d958dc4d6be
https://qiita.com/nr27bypphy/items/ee42f641d47a72e1aed8
https://qiita.com/mikuhonda/items/e94bdb8b6778ce9df59c