css - 忽略部分sass文件进行解析

Question

我试图让 SASS 在解析时忽略我的部分 .scss 代码。

这是我正在制作的 shopify 主题。我的 scss 文件被编译成 .css.liquid 文件，这样我也可以将 shopify 的模板语言 liquid 放入 css 中。

我希望编译后的 css.liquid 看起来像这样:

.header--logo {
  background: url({{ 'header-logo.png' | asset_url }}) 0 0 no-repeat;
}

在 LESS 中我曾经这样做过:

.header--logo {
  background: ~"{{ 'header-logo.png' | asset_url }}" 0 0 no-repeat;
}

SASS 是否也有一种简单的方法来做同样的事情？

谢谢!

Answer 1

Sass 不提供转义所有声明的功能。

要按原样传递 CSS 值，而不用 Sass 解析，将其放入引号中并使用 unquote() 函数删除引号:

.header--logo {
  background: unquote("url({{ 'header-logo.png' | asset_url }}) 0 0 no-repeat");
}

如果你经常使用它，你可以使用辅助函数让它变得更容易一些:

@function i($str) {
  @return unquote($str);
}

.header--logo {
  background: i("url({{ 'header-logo.png' | asset_url }}) 0 0 no-repeat");
}

或者，您可以“忽略”值的一部分而不是整个值。你需要插值来做到这一点，我。 e. #{unquote('...')}。用法示例:

.header--logo {
  background: url(#{unquote("{{ 'header-logo.png' | asset_url }}")}) 0 0 no-repeat;
}

所有方法的演示:http://sassmeister.com/gist/4920a805f0451192ec9b