用于 shopify 主题开发的 LESS 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

对于可能偶然发现此页面的其他人的信息，您实际上不需要处理这样的变量:

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

你实际上可以用 SASS interpolation 来做到这一点像这样:

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

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