忽略sass文件的一部分以进行解析

Question

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

这是我正在制作的shopify主题.我的scss文件被编译成.css.liquid文件,这样我就可以将shopify的模板语言液体放入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");
}

或者,您可以"igonre"值的一部分而不是整个值.你需要插值才能做到这一点,即#{unquote('...')}.用法示例:

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