LESS CSS and escaping Liquid syntax for shopify theme development

Question

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?

Answer 1

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.