{%-と{%の違い

久々にLiquidを使うと割と忘れているこの違い。
大した話でもないのになぜ忘れるのかといつも思うのですが、
忘れちゃうんだから仕方ない。メモ書きです。

{%- と {% の違いは、「空白（改行やスペース）を削除するかどうか」です。

一言で言うと、ハイフン( - )は「直前の空白を削除する」という役割です。

具体例

例えば、以下のようなLiquidコードがあったとします。

通常の {% を使った場合

<p>
  {% for product in collections.all.products %}
    {{ product.title }}
  {% endfor %}
</p>

<p>
  {% for product in collections.all.products %}
    {{ product.title }}
  {% endfor %}
</p>

このコードが出力するHTMLは、Liquidのforループの前後にある改行やインデント（スペース）がそのまま残ってしまいます。

出力されるHTML

<p>
  
    商品A
  
    商品B
  
    商品C
  
</p>

<p>
  
    商品A
  
    商品B
  
    商品C
  
</p>

たくさんの不要な改行が入ってしまっています。

ハイフン付きの {%- を使った場合

{%- は「タグの左側の空白」を、-%} は「タグの右側の空白」を削除します。

コード スニペット

<p>
  {%- for product in collections.all.products -%}
    {{ product.title }}
  {%- endfor -%}
</p>

<p>
  {%- for product in collections.all.products -%}
    {{ product.title }}
  {%- endfor -%}
</p>

出力されるHTML

<p>
    商品A
    商品B
    商品C
</p>

<p>
    商品A
    商品B
    商品C
</p>

最初の例と比べて、forループの周りにあった余分な改行が消えて、
HTMLソースがスッキリです！

まとめ

• {%
  • 通常のLiquidタグ。前後の空白はそのまま出力される。
• {%-
  • Whitespace Control（空白制御）タグ。
  • このタグの左側（直前）にある改行やスペースをすべて削除してくれる。

同様のルールは、タグの終わり -%} や、変数を出力する {{-、-}} にも適用されます。

生成されるHTMLのソースコードをきれいに保ちたい時や、
意図しない空白がレイアウトに影響を与えるのを防ぎたい時に使う機能です。