Escaping liquid in Sass

Highlighted
Shopify Partner
2 0 2

I'm using Sass string interpolation to insert settings. Despite this being demonstrated on the recently advertised Skillshare Advanced Shopify Theme Development course, I'm having trouble with it.

As an example, a test I've tried out:

.test {
  /*
    {{  settings.color_primary  }}
  */
  color: {{ settings.color_primary }};
  background-color: #{"{{ settings.color_primary }}"};
  border-color: #{'{{ settings.color_primary }}'};
}

is producing:

.test {
  /*
    color_setting('color_primary', #2f4172)
  */
  color: /*!setting.color_primary{*/#2f4172/*}*/;
  background-color: /*!setting.'color_primary'{*/#2f4172/*}*/;
  border-color: /*!setting." color_primary "{*/#2f4172/*}*/; }

whereas I would expect:

.test {
  /*
    #2f4172;
  */
  color: #2f4172;
  background-color: #2f4172;
  border-color: #2f4172; }

As you can see, there are some comments injected into the value produced by liquid, which will break the use of any color modifying function (such as darken or lighten). Is this behaviour documented anywhere? Does anyone know of a way round it? Liquid appears to be aware of the context in which it's being asked to print the value, as the version in the comment block uses round braces, vs the curly braces in the CSS rules.

 

At a loss as to what else to try now. Any ideas?

1 Like
Highlighted
Shopify Expert
650 0 99

Make sure your file has the ".liquid" extension as in styles.scss.liquid

I normally do it this way and it works fine for me.

 

/* #VARIABLES */

$header_font_colour: {{ settings.header_font_colour }};
$header_link_colour: {{ settings.header_link_colour }};
$header_link_hover_colour: {{ settings.header_link_hover_colour }};
$header_background_colour: {{ settings.header_background_colour }};







.header-grid {
	color: $header_font_colour;
}

 

1 Like
Highlighted
Shopify Partner
2 0 2

Thanks for the reply. Yes, the file has a liquid extension, and in terms of just getting the value of the variable into the output - yes, that works. Unfortunately, liquid tags aren't valid Sass, so they break the linter. While not the end of the world, it's a helpful tool I find useful.

 

One of the lessons on the Skillshare course recently mentioned in the Partner blog (here) mentions this problem, and says that using Sass string interpolation is a way to solve that problem. Instead, I'm getting these odd comments...

1 Like
Highlighted
New Member
1 0 0

Did anybody manage to find a solution for this yet?

0 Likes
Highlighted
Highlighted
New Member
1 0 0

I was scratching my head about this - a little styling may help:

color: /*!setting.color_primary{*/#2f4172/*}*/;

Where the blue is the rule identifier, grey is a comment and red the declaration.

So the code in the SASS file:

Screenshot 2020-07-15 at 14.01.05.png

Is rendered in the theme editor preview thus: 

Screenshot 2020-07-15 at 13.56.46.png

Once the file is published to a live site the SASS is compacted and all comments removed, thus:

Screenshot 2020-07-15 at 13.59.57.png

Confusing as anything but, once worked out, almost helpful.

 

 

0 Likes