用于shopify主题开发的CSS和转义Liquid语法

Question

我正在创建一个Shopify主题,我正在使用LESS来编译Shopify需要的样式表作为style.css.liquid.这一切都工作正常,我开始添加lquid过滤器和if语句.

当它在css属性中时,我的Liquid语法有效:

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

其编译成如下:

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

这很好.

我不能做的是插入一个液体声明,而不是像这样的css属性:

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

我试过逃避它

~"{% settings… %}"

乃至

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

然后跑

@{var} 

但是我的编译器不喜欢它......

有什么建议？

Answer 1

如果有人感兴趣,我解决这个问题的方法是将我的shopify/Liquid内容放在评论中,如下:

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

Shopify很荣幸这一点.

Answer 2

只是为了找到可能偶然发现这个页面的其他人的信息,你实际上并不需要像这样处理变量:

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

您可以使用SASS插值实际执行此操作:

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

外行人的术语中的插值只是包装一个变量#{' '},告诉SASS在编译CSS时将其输出为纯文本.