Escaping liquid in SASS

Why would we do this?

Shopify allows us to use sass/scss in our theme files, however they don't allow us to use its import rule to concatenate our style sheets. Unfortunately we do need this if we want to be able to use Bootstrap.

So our workaround is that we create our styles sheets with sass outside of the Shopify theme folder and then have it compile these into our theme. This is great if we just want a simple css file, however quite often we need to use liquid inside our style sheets.

When you do this with a normal Shopify theme you'll create a style.scss.liquid file. Shopify compiles the liquid first and then the sass to create the final css output.

But we are doing things a little backwards. To be able to get Shopify to compile our liquid we have to get our sass file, the one that sits outside the theme folder, to create a file inside our theme assets that includes the liquid.

However we cant just write straight liquid into our sass file and expect it to work. When the sass compiler comes across a line of liquid it's going to have a massive tantrum: http://25.media.tumblr.com/tumblr_m8h44tYXlG1qba9rro1_500.gif

So what do we do?

We need to escape our liquid and we can do this by using string interpolation in sass.

Here is a simple example. Say we want to set the colour of our links to whatever is in our theme settings. In Shopify we would write:

a{
  color: {{ settings.link-color }};
}

To escape this in our sass we would nee to write it as:

a{
  color: #{'{{ settings.link-color }}'};
}

Note the #{' ... '} around our liquid, this is sass's string interpolation. Another way of writing this would be colour: unquote('{{ settings.link-colour }}');

There are a few more tricks that will allow you to escape other kinds of liquid such as if statements. You see them here: https://gist.github.com/stewartknapman/8346708.

Using sass' functions

It's possible to have scss functions working:

1. Include your stylesheet file with both .scss.css extension: {{ 'application.scss.css' | asset_url | stylesheet_tag }}

Now you can use the scss functions like this:

/* {{ settings.color_secondary | prepend: '*\/ $colorSecondary: ' | append: '; \/*' | remove: '\' }} */
.jadada {
	background-color: #{'darken($colorSecondary, Q10%)'};
}

or

.jadada {
	background-color: #{'darken({{ settings.color_secondary }}, 10%)'};
}