我试图让 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 是否也有一种简单的方法来做同样的事情?
谢谢!
最佳答案
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;
}
关于css - 忽略部分sass文件进行解析,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25136523/