3

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?

Chris Mousdale
  • 505
  • 1
  • 9
  • 21
  • 1
    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 Jun 24 '12 at 14:38
  • 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 Jun 24 '12 at 14:42
  • @DavidLazar can you explain how that might be done? I can't find any documentation. Thanks! – rda3000 Oct 04 '12 at 23:32

3 Answers3

6

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.

Haroen Viaene
  • 1,329
  • 18
  • 33
Chris Mousdale
  • 505
  • 1
  • 9
  • 21
6

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.

davidnknight
  • 462
  • 4
  • 7
0

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 }}'});
Jason Gilmour
  • 100
  • 2
  • 8