LESS CSS和转义用于shopify主题开发的液体语法

我正在创建Shopify主题，我正在使用LESS编译Shopify需要的样式表作为style.css.liquid。这一切都运行良好util我开始添加在lquid过滤器和if语句。LESS CSS和转义用于shopify主题开发的液体语法

我有液体语法工作时很CSS属性：

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

这编译成类似：

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

这是罚款。

什么我不能做的就是插入液体声明没有被CSS属性像在此之前：

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

我试图逃脱它作为

~"{% settings… %}"

甚至

然后运行

@{var}

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

有什么建议？

我知道你正在使用较少，但如果您改用了Sass，您将能够注册Liquid构造以忽略，因此Sass会在重新制作您的Liquid时愉快地编译您的样式表。这是值得一试的，因为它只需要一行代码或两个教给Sass你自己的处理程序，在这种情况下是一个Liquid处理程序。 –

感谢大卫 - 我想我可能会尝试切换到SASS，然后 - 我想我会变得更有意义，因为Shopify是在Ruby on Rails上写的......谢谢！ –

@DavidLazar你能解释一下怎么做？我找不到任何文档。谢谢！ – rda3000

如果任何人的兴趣，我解决这个得到了办法是把我shopify /液体的东西，在评论，像这样：

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

而且Shopify荣幸今天。

2012-07-23 22:31:42

只是为别人可能碰到这个页面绊倒的信息，你实际上并不需要处理这样的变量：

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

：

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

实际上，你可以用SASS interpolation这样做

非专业人士的插值只是用#{' '}包装一个变量，告诉SASS在编译CSS时将其作为纯文本输出。

2012-09-14 14:41:30 davidnknight

SASS一个不适合我 - 我试过它作为unquote（'{{liquid statement}}'） –

如果有人有兴趣使用的文件名和文件类型萨斯变量（例如自动生成的@ 2X媒体查询一个mixin）这是代码：

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

2015-08-03 13:54:53

回答