css - SASS插值错误

Question

我正在将我的 Shopify 主题的 CSS 转换为 SASS。我正在使用 SASS 插值标记 #{} 来处理我的 CSS 中嵌入的 shopify 模板代码。

我遇到了一个错误，尽管这让我很困惑。 SCSS如下...

背景图像:#{'{% if settings.use-background-image %}'} url( #{ '{{ "background-image.png"| asset_url }}' } ) #{ '{% endif %}'};

我的错误是...

错误 style.scss(第 83 行:“...{'{% endif %}'}”后的无效 CSS:预期字符串，为“;”)

知道我做错了什么吗？

Answer 1

你可以这样做:

.test {
    $test: '{% if settings.use-background-image %} url({{ "background-image.png" | asset_url }}) {% endif %}';
    background-image: unquote($test);
}

生成这个:

.test {
  background-image: {% if settings.use-background-image %} url({{ "background-image.png" | asset_url }}) {% endif %};
}