LESS CSS and escaping Liquid syntax for shopify theme development

3
votes

I'm creating a Shopify theme and I'm using LESS to compile the stylesheet that Shopify needs as a style.css.liquid. It was all working fine util i started to add in lquid filters and if statements.

I have the Liquid syntax working when it's in a css property: 

@brand-colour: ~"{{ settings.brand_colour }}"; 
h1{ color: @brand-colour;}

Which compiles into something like:

h1 {color: {{ settings.brandcolour }};

which is fine.

What i CANT do is insert a liquid statement without being before a css property like this:

{% if settings.full-bg %}
background-color: …

I've tried escaping it as 

~"{% settings… %}"

and even 

@var: "{% if settings.full-bg %}"

then running 

@{var}

But my compiler does not like it…

Any suggestions?

3
lessliquidshopify
I know you're using Less, but if you switched to using Sass you would be able to register Liquid constructs to ignore and hence Sass would happily compile your stylesheets while repsecting your Liquid. It's worth a try since it only takes a line of code or two to teach Sass your own handler, in this case a Liquid handler. – David Lazar
Thanks David - i think i might try and switch to SASS then - i guess i t makes more sense as Shopify is written on Ruby on Rails anyway… Thanks!! – Chris Mousdale
@DavidLazar can you explain how that might be done? I can't find any documentation. Thanks! – rda3000

3 Answers

6
votes

Just for information of anyone else that might stumble across this page, you don't actually need to handle variables like this:

@brand-colour: ~"{{ settings.brand_colour }}"; 
h1{ color: @brand-colour;}

You can actually do it with SASS interpolation like this:

h1 { color: #{'{{ settings.brand_colour }}'}; }

Interpolation in layman's terms is just wrapping a variable with #{' '} which tells SASS to just output this as plain text when compiling your CSS.

6
votes

If anyones interested, the way i got around this was by putting my shopify / Liquid stuff in comments, like so:

/* {% if settings.repeating-pattern %} */
background: url(~"{{ 'repeating-pattern-header.png' | asset_url }}");
/* {% endif %} */

And Shopify honoured this.

0
votes

If anyone is interested in using Sass variables for the filename and filetype (for example a mixin that automatically generates the @2x media queries) this is the code:

background-image: url(#{'{{ "'}#{$filename}.#{$filetype}#{'" | asset_url }}'});