用于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 interpolation这样做：

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

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

Answer 3

如果有人对使用Sass变量作为文件名和文件类型感兴趣（例如自动生成@ 2x媒体查询的mixin），则代码为：

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