用于 Shopify 主题开发的 LESS CSS 和转义 Liquid 语法答案

【问题标题】：LESS CSS and escaping Liquid syntax for shopify theme development用于 Shopify 主题开发的 LESS CSS 和转义 Liquid 语法
【发布时间】：2012-06-26 01:19:19
【问题描述】：

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

我的 Liquid 语法在 css 属性中有效：

@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}

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

有什么建议吗？

【问题讨论】：

我知道你正在使用 Less，但是如果你切换到使用 Sass，你将能够注册 Liquid 构造以忽略，因此 Sass 会很高兴地编译你的样式表，同时重新分析你的 Liquid。值得一试，因为只需要一两行代码就可以教 Sass 你自己的处理程序，在本例中是 Liquid 处理程序。
谢谢大卫 - 我想我可能会尝试切换到 SASS - 我想它更有意义因为 Shopify 是在 Ruby on Rails 上编写的......谢谢！！
@DavidLazar 你能解释一下怎么做吗？我找不到任何文档。谢谢！

标签： less liquid shopify

【解决方案1】：

只是为了提供可能偶然发现此页面的其他人的信息，您实际上不需要像这样处理变量：

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

您实际上可以像这样使用SASS interpolation 做到这一点：

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

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

【讨论】：

SASS 对我不起作用——我也试过 unquote('{{liquid statement }}')

【解决方案2】：

如果有人感兴趣，我解决这个问题的方法是将我的 shopify / Liquid 东西放在 cmets 中，如下所示：

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

Shopify 兑现了这一点。

【讨论】：

这真是个天才，它只是变成了一个空的 CSS 注释。多么棒的技巧。

【解决方案3】：

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

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

【讨论】：