Liquid syntax and whitespace control

One of the first things you will notice about the Liquid programming language is the different enclosing braces {{ }} , {% %} , {%- -%} and {{- -}}. What do these braces mean and what are their functions?

---

{% %}

These set of braces let you use Liquid code like assigning a variable.

{% assign variable = "Joe Pichardo" %}

There are other functions like adding conditions and looping through an array you can also do, but we will stick with assigning variables for now.

---

{{ }}

We've already seen the double braces being used in our theme: {{content_for_layout}}. The braces are used to display the assigned value of "content_for_layout". Here's an example of how we can assign our own value and render it to our page.

{% assign variable = "Joe Pichardo" %}
<h1>{{ variable }}</h1>

This will produce my name between the h1 tags.

<h1>Joe Pichardo</h1>

---

{%- -%} and {{- -}}

These set of braces with a minus sign help remove whitespace before and/or after. Say in our code we don't want a space before our text, we can use these braces to prevent that. Here we have space before and after trying to render my name.

{% assign variable = "Joe Pichardo" %}
<h1> {{ variable }} </h1>

The outcome:

<h1> Joe Pichardo </h1>

If we use the braces with the minus sign, those white spaces will be removed.

<h1> {{- variable -}} </h1>

The outcome:

<h1>Joe Pichardo</h1>

We can also remove only the whitespace that comes before the text.

<h1> {{- variable }} </h1>

The outcome:

<h1>Joe Pichardo </h1>

The same can be done for space after, with the minus sign on the closing braces.

<h1> {{ variable -}} </h1>

The outcome:

<h1> Joe Pichardo</h1>