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

Posted 2023-02-15

【中文标题】用于 Shopify 主题开发的 LESS CSS 和转义 Liquid 语法

【英文标题】：LESS CSS and escaping Liquid syntax for shopify theme development

【发布时间】：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 你能解释一下怎么做吗？我找不到任何文档。谢谢！

【参考方案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 ');