css - SASS 插值错误

Question

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

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

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

我的错误是......

error style.scss (Line 83: Invalid CSS after "...{'{% endif %}'}": expected string, was ";")

任何想法我做错了什么？

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 %};
}